知乎日报项目中,公共状态使用了 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 的提示
为了能在组件中都能实现数据共享,需要在
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();
}
})();
}, []);
标签:info,reducer,react,action,组件,import,redux,store
From: https://www.cnblogs.com/wj-goodgoodstudy/p/17311112.html