React 프로젝트에서 Redux를 사용하는 방법(자세한 튜토리얼)

이 글은 주로 React 프로젝트에서 Redux를 우아하게 사용하는 방법을 자세히 소개하고 있습니다. 이제 참고용으로 공유하겠습니다.

머리말

현재 프로젝트가 아직 Redux를 적용하는 수준에 도달하지 않았을 수도 있지만, 이를 미리 이해한다고 해서 나쁠 것은 없습니다. 이 글은 모든 사람이 Redux를 사용하는 데 도움이 되지는 않습니다

Concepts

우선. , 어떤 프레임워크와 프레임워크를 사용할 것인가?

React

UI 프레임워크

Redux

상태 관리 도구는 React와 아무 관련이 없으며 다른 UI 프레임워크도 Redux

react-redux

React 플러그인을 사용할 수 있습니다. 역할: React Redux의 편리함

react-thunk

미들웨어가 프로젝트에 사용됩니다. 기능: 비동기 작업 지원

디렉토리 구조

팁: Redux와 관련 없는 디렉토리는 생략되었습니다

|--src
 |-- store     Redux目录
  |-- actions.js
  |-- index.js
  |-- reducers.js
  |-- state.js
 |-- components  组件目录
  |-- Test.jsx
 |-- App.js    项目入口

준비

1단계: 기본값 제공 Redux는 데이터 관리에 사용되므로 데이터에는 기본값이 있어야 하므로 state.js 파일에 상태의 기본값을 넣습니다.

// state.js
// 声明默认值
// 这里我们列举两个示例
// 同步数据：pageTitle
// 异步数据：infoList（将来用异步接口获取）
export default {
 pageTitle: '首页',
 infoList: []
}

2단계: 리듀서를 생성합니다. 앞으로 꼭 필요한 데이터는 Reducers.js 파일에 넣습니다

// reducers.js
// 工具函数，用于组织多个reducer，并返回reducer集合
import { combineReducers } from 'redux'
// 默认值
import defaultState from './state.js'

// 一个reducer就是一个函数
function pageTitle (state = defaultState.pageTitle, action) {
 // 不同的action有不同的处理逻辑
 switch (action.type) {
 case 'SET_PAGE_TITLE':
  return action.data
 default:
  return state
 }
}

function infoList (state = defaultState.infoList, action) {
 switch (action.type) {
 case 'SET_INFO_LIST':
  return action.data
 default:
  return state
 }
}

// 导出所有reducer
export default combineReducers({
 pageTitle,
 infoList
})

3단계: 액션 생성 이제 리듀서를 생성했지만 이를 작동시킬 해당 액션이 없으므로 액션을 작성해 보겠습니다. 다음

// actions.js
// action也是函数
export function setPageTitle (data) {
 return (dispatch, getState) => {
 dispatch({ type: 'SET_PAGE_TITLE', data: data })
 }
}

export function setInfoList (data) {
 return (dispatch, getState) => {
 // 使用fetch实现异步请求
 window.fetch('/api/getInfoList', {
  method: 'GET',
  headers: {
   'Content-Type': 'application/json'
  }
 }).then(res => {
  return res.json()
 }).then(data => {
  let { code, data } = data
  if (code === 0) {
   dispatch({ type: 'SET_INFO_LIST', data: data })
  }
 })
 }
}

마지막 단계: 스토어 인스턴스 생성

// index.js
// applyMiddleware: redux通过该函数来使用中间件
// createStore: 用于创建store实例
import { applyMiddleware, createStore } from 'redux'

// 中间件，作用：如果不使用该中间件，当我们dispatch一个action时，需要给dispatch函数传入action对象；但如果我们使用了这个中间件，那么就可以传入一个函数，这个函数接收两个参数:dispatch和getState。这个dispatch可以在将来的异步请求完成后使用，对于异步action很有用
import thunk from 'redux-thunk'

// 引入reducer
import reducers from './reducers.js'

// 创建store实例
let store = createStore(
 reducers,
 applyMiddleware(thunk)
)
export default store

이제 Redux 사용을 위한 모든 준비가 완료되었습니다. 다음으로 React 컴포넌트에서 Redux를 사용해 보겠습니다

시작하기

먼저 작성해 보겠습니다. 애플리케이션 APP.js의 항목 파일

import React from 'react'
import ReactDOM from 'react-dom'
// 引入组件
import TestComponent from './components/Test.jsx'

// Provider是react-redux两个核心工具之一，作用：将store传递到每个项目中的组件中
// 第二个工具是connect，稍后会作介绍
import { Provider } from 'react-redux'
// 引入创建好的store实例
import store from '@/store/index.js'

// 渲染DOM
ReactDOM.render (
 (
 <p>
  {/* 将store作为prop传入，即可使应用中的所有组件使用store */}
  <Provider store = {store}>
   <TestComponent />
  </Provider>
 </p>
 ),
 document.getElementById(&#39;root&#39;)
)

마지막은 Test.jsx

// Test.jsx
import React, { Component } from 'react'

// connect方法的作用：将额外的props传递给组件，并返回新的组件，组件在该过程中不会受到影响
import { connect } from 'react-redux'

// 引入action
import { setPageTitle, setInfoList } from '../store/actions.js'
class Test extends Component {
 constructor(props) {
 super(props)
 }
 componentDidMount () {
 let { setPageTitle, setInfoList } = this.props
 
 // 触发setPageTitle action
 setPageTitle('新的标题')
 
 // 触发setInfoList action
 setInfoList()
 }

 render () {
 // 从props中解构store
 let { pageTitle, infoList } = this.props
 
 // 使用store
 return (
  <p>
  <h1>{pageTitle}</h1>
  {
   infoList.length > 0 ? (
    <ul>
     {
      infoList.map((item, index) => {
       <li>{item.data}</li>
      })
     }
    </ul>
   ):null
  }
  </p>
 )
 }
}

// mapStateToProps：将state映射到组件的props中
const mapStateToProps = (state) => {
 return {
 pageTitle: state.pageTitle,
 infoList: state.infoList
 }
}

// mapDispatchToProps：将dispatch映射到组件的props中
const mapDispatchToProps = (dispatch, ownProps) => {
 return {
 setPageTitle (data) {
  // 如果不懂这里的逻辑可查看前面对redux-thunk的介绍
  dispatch(setPageTitle(data))
  // 执行setPageTitle会返回一个函数
  // 这正是redux-thunk的所用之处:异步action
  // 上行代码相当于
  /*dispatch((dispatch, getState) => {
   dispatch({ type: &#39;SET_PAGE_TITLE&#39;, data: data })
  )*/
 },
 setInfoList (data) {
  dispatch(setInfoList(data))
 }
 }
}
export default connect(mapStateToProps, mapDispatchToProps)(Test)

Redux의 세 가지 원칙

1입니다. 단일 데이터 소스

전체 애플리케이션의 상태가 객체에 저장됩니다. 트리, 그리고 이 개체 트리는 하나의 저장소에만 존재합니다

2. 상태를 변경하는 유일한 방법은 작업을 실행하는 것입니다. 액션은 발생한 이벤트를 설명하는 데 사용되는 공통 개체입니다. 수정을 수행하는 순수 함수

액션이 상태 트리를 어떻게 변경하는지 설명하려면 리듀서를 작성해야 합니다.

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue Socket.io 소스 코드에 대한 자세한 분석

기본 JavaScript를 사용하여 돋보기 효과 달성

nodejs의 캐시로 redis를 통해 구현된 캡슐화된 캐시 클래스

위 내용은 React 프로젝트에서 Redux를 사용하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!