reactjs+redux/react-redux+redux-thunk+mongoose的架构系列之多个reducer的开发(六)

在使用redux做项目的时候，我们肯定会做模块化的管理，根据业务的区分，我们会把不同的业务状态进行单独的抽离，类似于vuex的modules功能，如果大家熟悉vuex的话，对这点理解起来也就比较轻松了，当然不了解的也不影响，在前面的项目基础上，下面我们来探讨怎么在react里面引入多个reducer。

新建index.redux.js和index.redux2.js

//index.redux.js
export const ADD_ONE = "add";
export const REMOVE_ONE = "remove";

//创建reducer
export function counter(state = 0, action) {
  switch (action.type) {
    case ADD_ONE:
      return state + 1;
    case REMOVE_ONE:
      return state - 1;
    default:
      return 10;
  }
}

//专门创建action
export function addOne() {
  return {
    type: ADD_ONE,
  };
}
export function removeOne() {
  return {
    type: REMOVE_ONE,
  };
}
//redux-thunk实现异步的延迟处理
export function addGunAfrer() {
  //redux-thunk返回函数
  return (dispatch) => {
    setTimeout(() => {
      dispatch(addOne());
    }, 3000);
  };
}

//index.redux2.js
export const LOGIN = "LOGIN";
export const LOGOUT = "LOGOUT";

//创建reducer
export function system(state = { isAuth: false, username: "李云龙" }, action) {
  switch (action.type) {
    case LOGIN:
      return { ...state, isAuth: true };
    case LOGOUT:
      return { ...state, isAuth: false };
    default:
      return state;
  }
}

//专门创建action
export function login() {
  return {
    type: LOGIN,
  };
}
export function logout() {
  return {
    type: LOGOUT,
  };
}

然后再我们的入口文件index.js中进行改造

...
import allReducers from "./allReducers";
...
const store = createStore(
  allReducers,
  /* preloadedState, */ composeEnhancers(applyMiddleware(thunk))
);
...

其他的保持不变，我们来测试下刚才做的修改！

页面上看到这个说明我们的修改生效了，报错是说明App组件里面的内容还未进行对应的修改，所以我们要修改App.js里面对store的导入方式

这样，我们的页面就显示正常了,熟悉的界面就正常了

我们来操作一番，试试能不能够正确的实现功能

这样又能继续的玩耍了！其他的组件就同样的操作即可。到这里，我们配置多个reducer就运行了。