redux(二)reducer的合并与拆分

本文介绍了一个使用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())
     })
  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值