JZTXT

组件公共状态管理react-redux

发布时间 2023-04-12 23:54:21作者: 超重了

知乎日报项目中，公共状态使用了 redux 和 react-redux，记录学习的知识
redux 工程化其实就是按模块划分，在开发中能更好的理解和维护，因此该项目将状态管理划分为如下的模块：

  • store 用作存放状态管理的文件夹
  • action 是 store 中数据的来源，actions 文件夹用来管理派发行为对象的，index.js是将其他的 action 全部都合并到一个 action 中，并且暴露出去，该文件夹下其他的 js 文件都是针对不同功能的行为对象
  • reducer 文件夹是 reducer 的模块化管理，通过派发的不同行为对象标识（type）来执行不同的操作（状态处理函数），index.js是将 reducer 全都合并到一个 reducer 中，并且暴露出去
  • action-types.js 文件存放不同的行为对象标识符（type）
  • index.js 是用来创建并暴露 store
    下面为每个文件的具体代码
// store/actions/base.js
import * as TYPES from '../action-types';
import api from '../../api';
const baseAction = {
    // 异步获取登陆者信息，完成派发
    async queryUserInfoAsync() {
        let info = null;
        try {
            let { data, code } = await api.queryUserInfo();
            if (+code === 0) {
                info = data;
            }
        } catch (error) { }
        return {
            type: TYPES.BASE_INFO,
            info
        }
    },
    // 清除存储的登录者信息
    clearUserInfo() {
        return {
            type: TYPES.BASE_INFO,
            info: null
        }
    }
};
// 暴露
export default baseAction;

⬆ 我们也可以看出其实action就是一个普通对象，只不过必须包含type标识符，同时需要有数据（可以从后端获取也可以接收传递的数据）传递给 reducer 进行处理

// store/actions/index.js
import baseAction from './base';
import storeAction from './store';

const actions = {
    base: baseAction,
    store: storeAction
};

export default actions;

⬆ 该文件用于整合所有的 action，进行统一暴露处理

// store/reducer/base.js
import * as TYPES from '../action-types';
import _ from '../../assets/utils';

let inital = {
    info: null
}
// 给state设置初始值
export default function baseReducer(state=inital,action) {
    // 因为 reducer 不能返回原来的对象，所以需要将对象进行克隆，因此在 case 中最好不要出现 push 等数组操作，因为并没有修改原来的对象或数组的地址，可以使用浅克隆{...state}，我这里使用了深克隆
    state=_.clone(state);
    // 使用 switch 语句进行逐个匹配
    switch(action.type){
        // 更新登陆者信息，在这里使用标识符进行匹配，减少错误，方便差错和维护
        case TYPES.BASE_INFO:
            state.info=action.info;
            break;
            // 也可以写成 return state.info=action.info;
        default:
    }
    return state;
};

⬆ 对存储的状态进行处理

import { combineReducers } from 'redux';
import baseReducer from './base';
import storeReducer from './store';
// 使用 combineReducers 将状态处理函数进行整合
const reducer = combineReducers({
    base:baseReducer,
    store:storeReducer
});
export default reducer;

⬆ 整合状态处理函数

// store/action-types.js
export const BASE_INFO = "BASE_INFO";

export const STORE_LIST = "STORE_LIST";

export const STORE_REMOVE = "STORE_REMOVE";

⬆ 定义对象标识符

import { createStore, applyMiddleware } from 'redux';
import reduxLogger from 'redux-logger';
import reduxThunk from 'redux-thunk';
import reduxPromise from 'redux-promise';
import reducer from './reducer';
// 根据不同的环境使用不同的中间件，Thunk和Promise都是用于处理异步的状态
let middleware = [reduxThunk, reduxPromise],
    // 存放了当前的环境变量
    env = process.env.NODE_ENV;
// 如果当前环境为开发环境，就会有 reduxLogger，即每次状态改变都会打印路由状态信息
if (env === 'development') {
    middleware.push(reduxLogger);
}
// 创建store并使用中间件
const store = createStore(
    reducer,
    applyMiddleware(...middleware)
);
export default store;

⬆ 查看当前环境变量 ⬇

⬇ reduxLogger 的提示

为了能在组件中都能实现数据共享，需要在 外嵌套 Provider

import { Provider } from 'react-redux';
import store from './store';
// ······其他配置项
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    // ConfigProvider 是antd-mobile的配置项，用来配置语言选项
    <ConfigProvider local={zhCN}>
        <Provider store={store}>
            <App />
        </Provider>
    </ConfigProvider>
);

在需要使用store的组件中需要使用connect关键字，就可以在组建的props中获取需要的方法

import { connect } from "react-redux";
import actions from "../store/actions";

const Detail = function Detail(props) {
    console.log(props)
};
export default connect(
    state => {
        return {
            base: state.base,
            store: state.store
        }
    },
    { ...actions.base, ...actions.store }
)(Detail);

props如下图 ⬇ ：

    //  将所需的方法解构出来后就可以直接使用了
    let {
        base: { info: userInfo }, queryUserInfoAsync,
        location,
        store: { list: storeList }, queryStoreListAsync, removeStoreListById
    } = props;
    useEffect(() => {
        (async () => {
            // 第一次渲染完，如果userInfo不存在，需要派发任务同步登陆者信息
            if (!userInfo) {
                let { info } = await queryUserInfoAsync();
                userInfo = info;
            }
            // 已经登录 && 没有收藏列表
            if (userInfo && !storeList) {
                queryStoreListAsync();
            }
        })();
    }, []);