结合生成问题的简单减速器

Question

我运行在尝试使用 redux 编码时遇到问题。我基本上是在尝试结合 reducers.I 然后通过 Redux 入门教程但我似乎遇到了一个完全不同的问题。尽管我理解错误，但我找不到解决方案。

以下是我要组合的减速器：

const increment = (state = 0, action)=>{
    console.log(state,action)
    switch (action.type){
        case 'INCREMENT':
            return state-1;
        default:
            return state;
    }
}
const decrement = (state = 0, action)=>{
    console.log(state,action)
    switch (action.type){
        case 'DECEREMNT':
            return state-1;
        default:
            return state;
    }
}
const combineReducers = require('redux').combineReducers;

const counter = combineReducers({
    increment,
    decrement,
})

module.exports = counter;

如果我执行以下操作没有问题，

const counter = (state = 0, action)=>{
    console.log(state,action)
    switch (action.type){
        case 'INCREMENT':
            return state+1;
        case 'DECEREMNT':
            return state-1;
        default:
            return state;
    }
}
module.exports = counter

所以我相信我在组合减速器时遇到了一些问题。以下是我收到的错误：

Uncaught Error: Objects are not valid as a React child (found: object with keys {increment, decrement}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Counter`.

如果相关，这是我的索引：

"use strict";

const React = require('react');
const ReactDOM = require('react-dom');
const createStore = require("redux").createStore

var counter = require("./reducers")

const store = createStore(counter)
console.log("First call",store.getState()) 

const Counter = ({ 
    value,
    increment, 
    decrement
}) =>(
    <div>
        <h1>{value}</h1>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
    </div>
);
const render = () =>{
    console.log("value ",store.getState());
    console.log("dispatch action",)
    ReactDOM.render(
      <Counter value={store.getState()}
      increment={()=>{store.dispatch({type:'INCREMENT'})}}
      decrement={()=>{store.dispatch({type:'DECREMENT'})}}/>,
      document.getElementById('content')
    );
}
store.subscribe(render)
render()

我正在尝试学习分离减速器。我已经完成了几个项目，但我的 reducer 文件太大导致合并问题。让我知道我的方法是否正确，如有任何解决上述问题的建议，我们将不胜感激。

更新我尝试独立调用 store.dispatch({type:'INCREMENT'})，它确实有效，但会导致浏览器不断增加导致浏览器冻结的值。

以下反应代码正在运行。

var Counter = React.createClass({
    render:function(){
        console.log(this.props.value)
        return <div>
                {this.props.value.counter}
                <button onClick={this.props.increment}>+</button>
                <button onClick={this.props.decrement}>-</button>
            </div>
    }
});

const render = () =>{
    console.log("value ",store.getState());
    ReactDOM.render(
      <Counter value={store.getState()}
      increment={()=>{store.dispatch({type:'INCREMENT'})}}
      decrement={()=>{store.dispatch({type:'DECREMENT'})}}/>,
      document.getElementById('content')
    );
}
store.subscribe(render)
render()

使用来自 redux page

的减速器

Answer 1

您应用的状态必须是代表计数器值的数字。

减速器的工作版本之所以有效，是因为它是一个产生单个数字的减速器——这是预期的状态。

combineReducers 版本不起作用，因为 combineReducers 以对象的形式生成 reducer 的组合。在您的例子中，这个对象有两个属性——increment 和 decrement，每个属性都由各自的 reducer 管理。这会产生这种形状的应用程序状态

{ increment: 0, decrement: 0 }

而不是单个数字。完全不是你想要的。顺便说一句，这正是您遇到上述异常的原因，它起源于

<Counter value={store.getState()}

当 value 道具被绑定到对象而不是数字时。

底线是，你想坚持使用减速器的原始版本，或者如果你想重构它，将 increment/decrement 代码提取到它们自己的函数中，但从各自的函数中调用它们switch 减速器中的案例。

结合生成问题的简单减速器

Simple reducer combining generating issues

reactjs

react-redux