redux、react-redux、redux-thunk、immutable、redux-immutable 实现各组件同步、异步状态管理

1. 安装依赖库

注意：immutable 版本，如果出错可版本回退到 immutable@^3.8.2

npm i redux react-redux redux-thunk immutable@^3.8.2 redux-immutable -S

2. 在程序 index.js 入口文件中，导入 store，使用 Provider 组件包裹根组件

被 Provider 包裹的组件，都可以获取和操作 store 状态

import React from "react";
import { BrowserRouter } from "react-router-dom";
import ReactDOM from "react-dom/client";
import App from "./App";

import { Provider } from "react-redux"; // 1. 导入 Provider 组件
import store from "./store"; // 2. 导入 store

const root = ReactDOM.createRoot(document.getElementById("root"));

// 3. 使用 Provider 包裹组件
root.render(
  
    
      
    
  
);

3. 定义 store，创建 src\store\index.js

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'; // 1. 导入 redux-thunk 异步中间件
import reducer from "../pages/home/store/reducer" // 2. 导入组件 reducer
import { combineReducers } from 'redux-immutable'; // 3. 从 redux-immutable 依赖库导入 combineReducers

// 4，合并各组件 reducer
const rootReducer = combineReducers({
    home: reducer,
});

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancers(
    applyMiddleware(thunk)
));

export default store;

4. 在组件中获取和操作 store 状态

1. 定义 action 的 type，创建 src\pages\home\store\constants.js

export const CHANGE_NUM_SYNC = 'home/CHANGE_NUM_SYNC';
export const CHANGE_NUM_ASYNC = 'home/CHANGE_NUM_ASYNC';

2. 定义组件 reducer，创建 src\pages\home\store\reducer.js

import { CHANGE_NUM_SYNC,CHANGE_NUM_ASYNC } from "./constants"; // 1. 导入 action 的 type
import { fromJS } from 'immutable'; // 2. 导入 immutable

// 3. 定义 store 初始状态，并转化为 immutable 结构
const defaultState = fromJS({
  num: 1,
});

// 4. 创建 reducer，在 dispatch action 后触发，不改变 store 状态的情况下，结合原始 store 状态和 action 返回最新 store 状态
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case CHANGE_NUM_SYNC:
      return state.merge({
        num: fromJS(state.get("num") + action.payload),
      })
    case CHANGE_NUM_ASYNC:
      return state.merge({
        num: fromJS(state.get("num") + action.payload),
      })
    default:
      return state;
  }
};

export default reducer;

3. 定义组件 action，创建 src\pages\home\store\actionCreators.js

// 1. 导入 action 的 type
import { CHANGE_NUM_SYNC, CHANGE_NUM_ASYNC } from "./constants";

// 2. 定义同步 action
export const changeNumActionSync = (num, ownProps) => {
  return {
    type: CHANGE_NUM_SYNC,
    payload: num + ownProps.componentParam,
  };
};

// 3. 定义异步 action
export const changeNumActionAsync = (num, ownProps) => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch({
        type: CHANGE_NUM_ASYNC,
        payload: num + ownProps.componentParam,
      })
    }, 1000);
  };
};

4. 定义组件，创建 src\pages\home\index.js

import React, { PureComponent } from "react";
import { connect } from 'react-redux'; // 1. 导入 connect 用户连接 store 和 组件
import {changeNumActionSync, changeNumActionAsync} from "./store/actionCreators" // 2. 导入 action
class Home extends PureComponent {
  render() {
    return (
      <>
        
 react-redux 
        
 { this.props.num } 
 {/* 6. 在 rendeer 函数中使用store状态映射 */}
         this.props.changeNumSync(100)}>num ++ 同步 
         this.props.changeNumAsync(10000)}>num ++ 异步 {/* 7. 在 rendeer 函数中使用方法映射 */}
      
    );
  }
}

// 3. store 状态映射，state 参数为 store 状态，且状态结构为 immutable 结构，ownProps 参数为父组件传递过来的状态
const mapStateToProps = (state, ownProps) => {
 return {
  num: state.getIn(["home","num"]),
 }
}

// 4. store 方法映射，dispatch 参数为 store.dispatch 方法，ownProps参数为父组件传递过来的状态
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    changeNumSync: (num) => {
      dispatch(changeNumActionSync(num,ownProps))
    },
    changeNumAsync: (num) => {
      dispatch(changeNumActionAsync(num,ownProps))
    },
  }
}

// 5. 通过 connect(mapStateToProps, mapDispatchToProps)(component) 连接组件
export default connect(mapStateToProps, mapDispatchToProps)(Home)