Javascript Redux还原程序初始化相同的状态密钥

我在胡闹，我添加了第二个减量器，它减少state.count。如果我在switch-case语句中有增量和减量减缩器，它可以正常工作。我想做的练习是将减速机拆分为尽可能多的模块化部件。此代码抛出一个错误，表示计数未定义

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

从“React”导入React；
从'redux'导入{createStore，combinereducer}；
从'react redux'导入{Provider，connect}；
//反应组分
类计数器扩展了React.Component{
render（）{
const{value，onIncreaseClick，onDecreseClick}=this.props；
返回(
{value}
增加
减少
);
}
}
//行动：
const increaseAction={type:'increase'}；
const decreaseAction={type:'decrease'}；
//减速器：
功能计数器（状态、动作）{
让count=state.count；
开关（动作类型）{
个案"增加":
返回{count:count+1}；
违约：
返回状态；
}
}
功能减量器（状态、动作）{
让count=state.count；
开关（动作类型）{
“减少”一案：
返回{count:count-1}；
违约：
返回状态；
}
}
const rootReducer=combinereducer({
柜台
减量器
})
//商店：
let store=createStore（rootReducer，{count:0}）；
//将Redux状态映射到组件道具
函数MapStateTops（状态）{
console.log（“mapstatetops heyyyy”）；
返回{
值：state.count
};
}
//将Redux操作映射到组件道具
功能图DispatchToprops（调度）{
console.log（“mapDispatchtoProps heyyyy”）；
返回{
onIncreaseClick:（）=>dispatch（increaseAction），
OnDecreseClick:（）=>dispatch（DecreseAction）
};
}
//连接的组件：
让App=连接(
MapStateTops，
mapDispatchToProps
)（柜台）；
反应(
{() => }
,
document.getElementById（'root'））
);

传递给组合减速机的减速机获得状态对象的不同部分

生成的reducer调用每个子reducer，并将其结果收集到单个state对象中状态对象的形状与传递的

减缩器的键匹配

（强调矿山）

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

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

这类似于在flux应用程序中有单独的存储，其中每个存储都运行自己的全局应用程序状态的“部分”

由于您实际上希望这两个减缩器在状态对象的同一部分上工作，因此您实际上希望更类似于，尽管您自己很容易实现，只需依次将状态传递到每个减缩器，使用每个减缩器中的新状态来减少初始状态

事实上，它非常简单，实现只需几行：

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

而您的

rootReducer

将

const rootReducer = reduceReducers(counter, decrementer);

---

你太近了！问题是，当您使用CombineReducer时，它实际上会分割“状态”，这样您输入的还原器的状态就是“状态”对象上的属性

因此，为了向它们提供默认参数，如下所示：

let store=createStore（rootReducer，{counter:{count:0}，reducer:{count:0}）；

它在哪一行声明？在计数器函数中的let count=state.count处。您是否尝试过

console.log（state）

？是的。。。这是没有定义的汉克斯！减速机是一个伟大的提示。我最终能够看到我的状态实际上是

state={counter:{count:0}，递减器：{count:0}