• combineReducers使用


    1. 随着应用变得复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分。
      //原本一个实现加,减,重置的reducer
      function reducer(state = {count: 0}, action) {
          switch(action.type) {
              case 'Increment':
                  return {
                      count: state.count+1
                  }
                  break;
              case 'Decrement':
                  return {
                      count: state.count-1
                  }
                  break;
              case 'Reset':
                  return {
                      count: 0
                  }
                  break;
              default:
                  return state
                  break;
          }
      }
    2. 我们可以拆分成两个,然后使用combineReducers结合起来
      //拆分成多个reducer,然后结合
      import { combineReducers } from 'redux'
      function change(state = {count: 0}, action) {
          switch(action.type) {
              case 'Increment':
                  return {
                      count: state.count+1
                  }
                  break;
              case 'Decrement':
                  return {
                      count: state.count-1
                  }
                  break;
              default:
                  return state
                  break;
          }
      }
      function reset (state = {count: 0}, action) {
          switch(action.type) {
              case 'Reset':
                  return {
                      count: 0
                  }
                  break;
              default:
                  return state
                  break;
          }
      }
      export default combineReducers({
          change,
          reset
      })
    3. 需要注意的是我们的每个reducer必须有返回值,如果不做改变返回传入的state
    4. 使用combineReducers暴露出去之后,再使用store.getState()获取到的是这样一个结构,相当于每个reducer都有自己的一个state,不互通

      我们要获取到count的值 store.getState().change.count分别去取值

  • 相关阅读:
    libev & libevent简介
    MyEclipse10+Flash Builder4+BlazeDS+Tomcat7配置J2EE Web项目报错(一)
    增加表空间大小的四种方法
    JavaScript获取某年某月的最后一天
    Not in 改写左连接不需要关注连接列是否重复数据
    自连接
    左链接,右连接
    In,内链接和空值
    HighCharts基本折线图
    NetBeans运行项目报错
  • 原文地址:https://www.cnblogs.com/longlongdan/p/10775911.html
Copyright © 2020-2023  润新知