Redux

准备工作

• 下载插件

  yarn add redux react-redux redux-thunk
  

  • redux：提供状态机的核心功能
  • redux-redux：负责关联组件的和状态机
  • redux-thunk：处理状态机的异步

状态机的配置

注：src下新建redux/index.js

• 创建store对象

  import { legacy_createStore as createStore} from "redux"
  const store = createStore(countReducer)
  export default store
  

• 全局注册状态机（main.js）

  import { store } from './store/index';
  import { Provider } from 'react-redux';
  ReactDOM.createRoot(document.getElementById('root')).render(
      <Provider store={store}>
          <App />
      </Provider>
  )
  

• 设置仓库数据初始值

  const initData = [];
  export const userReducer = (state = initData, action) => {
      switch (action.type){
          default: 
              return state
      }
  }
  

组件中操作Redux

• 组件中获取Redux数据

  import { useSelector } from 'react-redux'
  export default function User(){
      const dataSource = useSelector((state) => {
          console.log(state.users)
          return state.users
      })
  }
  

• 操作状态机数据

  • 组件中，通过触发reducer方法，来实现状态机数据的修改

    import { useDispatch } from 'react-redux'
    export default function User(){
    	const dispatch = useDispatch()
        const onFinish = (value) => {
            dispatch({
                type: 'ADD_USER',
                payload: value
            })
        }
    }
    

  • 配置reducer操作数据

    const initData = [];
    export const userReducer = (state = initData, action) => {
        switch (action.type){
            case "ADD_USER":
                return [
                    ...state,
                    action.payload
                ]
            default: 
                return state
        }
    }
    

封装Action

• 提取action对象src/redux/users/usersAction.js

  export const addUserAction = (payload) => {
      return {
          type: "ADD_USER",
          payload
      }
  }
  

• 组件中引入action对象

  import { useDispatch } from 'react-redux'
  import { addUserAction } from '上面的组件路径'
  export default function User(){
  	const dispatch = useDispatch()
      const onFinish = (value) => {
          dispatch(addUserAction(value))
      }
  }
  

• 提取type常量值src/redux/users/usersActionType.js

  export const ADD_USER = "ADD_USER"
  

• action对象中，reduucer中获取常量值

  import { ADD_USER } from 'src/redux/users/usersActionType'
  export const addUserAction = (payload) => {
      return {
          type: ADD_USER,
          payload
      }
  }
  

模块化

类似于Vuex中的modules

新建redux/roles/rolesReducer.js

新建redux/users/usersReducer.js

• redux/users/usersReducer

  const initData = [];
  export const userReducer = (state = initData, action) => {
      switch (action.type){
          default: 
              return state
      }
  }
  

• redux/index.js中合并

  import { legacy_createStore as createStore, combineReducers} from "redux"
  // 引入模块
  import { usersReducers } from "./users/usersReducer"
  import { rolesReducers } from "./users/usersReducer"
  // combineReducers:用来合并reducers
  const allReducers = combineReducers({
      users: usersReducers,
      roles: rolesReducers
  })
  const store = createStore(allReducers)
  export default store