Skip to content
{}

进阶知识 - Redux

将模块抽离合并 combineReducers

Redux combineReducers()可以将模块化抽离的 reducer合并到一起。每一块Reducer处理方法可以是一个单独的文件,最后在合并到一起成为一个新的大Reducer

combineReducers({reducer1,reducer2})

<!-- /Reducers/AddText -->
const AddReducer = (
  oldState = {
    AddText: "河南",
  },
  Action
) => {
  let NewState = { ...oldState };
  switch (Action.type) {
    case "AddText":
      NewState.AddText = Action.value;
      return NewState;
    default:
      return oldState;
  }
};
export default AddReducer;

<!-- /Reducers/TabbleHide.jsx -->
const Tabble = (
  oldData = {
    TabbleShow: true,
  },
  Action
) => {
  console.log(Action);
  const NewData = { ...oldData };
  switch (Action.type) {
    case "TabbleHide":
      NewData.TabbleShow = !NewData.TabbleShow;
      return NewData;
    case "TabbleShow":
      NewData.TabbleShow = !NewData.TabbleShow;
      return NewData;
    default:
      return oldData;
  }
};
export default Tabble;



<!-- store.js -->
import { legacy_createStore as createStore, combineReducers } from "redux";
import TabbleReducer from "./Reducers/TabbleHide";
import AddReducer from "./Reducers/AddText";
// combineReducers({reducer}) 模块化 将抽离出去的reducer 合并到一起成为一个大的reducer,方便模块化开发
const Reducer = combineReducers({
  TabbleReducer,
  AddReducer,
});
// 创建全局状态仓库对象
const Store = createStore(Reducer);

<!-- 使用数据 -->
Store.getState().AddReducer.AddText
Store.getState().TabbleReducer.TabbleShow

好好加油吧,少年!