Redux reducers初始化相同的状态键

Question

我正在使用github上的'simplest-redux-example',我添加了第二个减少state.count的reducer.如果我在switch case语句中有递增和递减reducers,它可以正常工作.我想要进行的练习是将减速器分成尽可能多的模块化部件.此代码抛出一个错误,指出count未定义.

import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';

// React component
class Counter extends React.Component {
  render(){
    const { value, onIncreaseClick, onDecreaseClick } = this.props;
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
        <button onClick={onDecreaseClick}>Decrease</button>
      </div>
    );
  }
}

// Action:
const increaseAction = {type: 'increase'};
const decreaseAction = {type: 'decrease'};

// Reducer:
function counter(state, action) {
  let count = state.count;
  switch(action.type){
    case 'increase':
      return {count: count+1};
    default:
      return state;
  }
}
function decrementer(state, action) {
  let count = state.count;
  switch(action.type){
    case 'decrease':
      return {count: count -1};
    default:
      return state;
  }
}
const rootReducer = combineReducers({
  counter,
  decrementer
})

// Store:
let store = createStore(rootReducer, {count: 0});

// Map Redux state to component props
function mapStateToProps(state)  {
  console.log("mapStatetoProps heyyyy");
  return {
    value: state.count
  };
}

// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
  console.log("mapDispatchtoProps heyyyy");
  return {
    onIncreaseClick: () => dispatch(increaseAction),
    onDecreaseClick: () => dispatch(decreaseAction)
  };
}

// Connected Component:
let App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

React.render(
  <Provider store={store}>
    {() => <App />}
  </Provider>,
  document.getElementById('root')
);

Answer 1

减速器传递以combineReducers获取状态对象的不同部分.

生成的reducer调用每个子reducer,并将其结果收集到一个状态对象中.状态对象的形状与传递的键匹配reducers.

(强调我的)

所以,内部状态对象看起来像

{
  counter: result of passing `state.counter` into counter reducer
  decrementer: result of passing `state.decrementer` into decrementer reducer
}

这类似于在通量应用程序中具有单独的存储,其中每个存储都操作其自己的全局应用程序状态的"块".

因为你真的希望这两个reducers工作在state对象的同一部分上,你实际上想要更像reduce-reducers的东西,虽然它很容易自己实现 - 只需依次将状态传递给每个reducer,减少初始状态来自每个减速器的新状态.

事实上,它很简单,实现只是几行:

export default function reduceReducers(...reducers) {
  return (previous, current) =>
    reducers.reduce(
      (p, r) => r(p, current),
      previous
    );
}

你rootReducer会的

const rootReducer = reduceReducers(counter, decrementer);

Answer 2

你真是太近了!问题在于,当你使用combineReducers时,它实际上会拆分"状态",这样你输入的reducer的状态就是"state"对象的属性.

因此,为了提供默认参数,如下所示: let store = createStore(rootReducer, {counter: {count: 0}, decrementer: {count:0}});