redux（二）reducer的合并与拆分

最新推荐文章于 2024-04-13 04:27:38 发布

原创最新推荐文章于 2024-04-13 04:27:38 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

frame class 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个使用Redux进行状态管理的应用实例，重点展示了如何将多个组件的状态管理器（reducer）合并到一个统一的状态管理器中，包括配置文件的调整、组件结构的变化以及视图更新的实现。

页面效果（一共是Todos和Number两个不相干的组件）：

redux配置文件和组件结构：

相当于是在前一篇中的结构，将store.js和抽离了出来，并且将两个组件的reducer通过redux模块中的combineReducers方法将其合并为一个reducer文件，放在与store.js同级的store文件夹下:

合并两个组件的reducer.js:

import {combineReducers} from 'redux';
import todosReducer from './todos/reducer';
import numberReducer from './number/reducer';

let reducer = combineReducers({//合并reducer
	todos: todosReducer,
	number: numberReducer
})
export default reducer;

store.js中直接改为引用合并后的reducer:

import {createStore } from 'redux';
import reducer from "./reducer";//引入当前目录下合并后的rreducer
let store = createStore(reducer);
export default store;

合并reducer后再view中得更改

  constructor(props){
      super(props);
      this.state ={
        todos: store.getState().todos.todos,//将原来的store.getState().todos改为store.getState().todos.todos
        c: store.getState().todos.todos.filter(v=>{
              return v.finished;
           }).length
      }
      this.changeChexkbox = this.changeChexkbox.bind(this)
      this.removeItem = this.removeItem.bind(this)
  }

还有不要忘了将新state在store.subscribe函数中监听：

  componentWillMount(){
     store.subscribe(()=>{//监听仓库数据改变，然后赋值给组件state
        this.setState({
           todos: store.getState().todos.todos,
           c: store.getState().todos.todos.filter(v=>{
              return v.finished;
           }).length
        })
        console.log(store.getState())
     })
  }