Redux reducers初始化相同的状态键 [英] Redux reducers initializing same state key

问题描述

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

I'm messing around with the 'simplest-redux-example' on github and I've added a second reducer that decrements state.count. If I have the increment and decrement reducers in a switch case statement, it works fine. The exercise I wanted to perform was to split reducers into as many modular pieces as possible. This code throws an error saying that count is undefined.

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')
);

推荐答案

传递给的reducereducers 获取状态对象的不同件。

The reducers passed to combineReducers get different pieces of the state object.

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

The resulting reducer calls every child reducer, and gather their results into a single state object. The shape of the state object matches the keys of the passed reducers.

（强调我的）

因此，内部状态对象看起来像

So, the internal state object would look like

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

这类似于在应用程序应用程序中具有单独的存储，其中每个存储都运行自己的块全局应用程序状态。

This is analogous to having separate stores in a flux application, where each store both operates its own "piece" of the global app state.

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

Since you actually want these two reducers to work on the same portion of the state object, you actually want something more like reduce-reducers, though it's very easy to implement yourself—just pass the state into each reducer in turn, reducing the initial state with the new state from each reducer.

事实上，我这很简单，实现只有几行：

In fact, it's so simple, the implementation is just a few lines:

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

和你的 rootReducer 将是

const rootReducer = reduceReducers(counter, decrementer);

这篇关于Redux reducers初始化相同的状态键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！