Javascript 简单的Redux计数器组件实现

我正在尝试使用简单的Redux实现计数器组件，使用

createStore

创建

store

并使用

store.dispatch

完整代码：

/*==================================================
这只是为了格式化代码，我用过这个编辑器，
您可以向下滚动查看小提琴是否有错误。
==================================================*/
const createStore=Redux.createStore；
常量计数器=（状态={
柜台:0
}，行动）=>{
console.log（'计数器'，状态）
开关（动作类型）{
案例“增量”：
返回状态。计数器+1；
“减量”一案：
返回状态计数器-1；
违约：
返回状态；
}
}
常量存储=创建存储（计数器）；
让计数器=React.createClass({
getInitialState（）{
return store.getState（）
},
递增计数器（）{
仓库调度({
类型：“增量”
});
},
递减计数器（）{
仓库调度({
类型：“减量”
});
},
render（）{
console.log（'newstate:'，store.getState（），this.STATE）
返回(
{this.state.counter}

+
-
) 
}
})
ReactDOM.render（，document.getElementById（'container'））

您有几个问题

您需要订阅状态更改，这很重要，因为您的组件不知道新状态

状态

是

对象

，您必须从

计数器

对象返回，在您的示例中，您在

递增

和

递减

中返回

数字

const createStore=Redux.createStore；
常量计数器=（状态={
柜台:0
}，行动）=>{
开关（动作类型）{
案例“增量”：
返回Object.assign（{}，state，{counter:state.counter+1}）；
“减量”一案：
返回Object.assign（{}，state，{counter:state.counter-1}）；
违约：
返回状态；
}
}
常量存储=创建存储（计数器）；
让计数器=React.createClass({
递增计数器（）{
dispatch（{type:'INCREMENT'}）；
},
递减计数器（）{
dispatch（{type:'DECREMENT'}）；
},
render（）{
返回
{this.props.value}

+
-
}
})
常量渲染=（）=>{
ReactDOM.render(
//获取更新的状态值，并将其传递给组件
, 
document.getElementById（'容器'）
)
};
存储。订阅（呈现）；
render（）
您的主要问题是：

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

特别是这几行：

         case 'INCREMENT':
             return state.counter + 1;
         case 'DECREMENT':
             return state.counter - 1;

你回来干什么？一个数字！但是您的状态形状是一个对象
{counter:Number}

因此，您必须返回一个新对象，如下所示：

         case 'INCREMENT':
             return {counter: state.counter + 1}
         case 'DECREMENT':
             return {counter: state.counter - 1}

         case 'INCREMENT':
             return {
                ...state,
                counter: state.counter + 1
             }
         case 'DECREMENT':
             return {
                ...state,
                counter: state.counter - 1
             }

上面的更改应该可以修复它。
要在减速器中更灵活，应将新对象指定给现有状态，如下所示：

         case 'INCREMENT':
             return {counter: state.counter + 1}
         case 'DECREMENT':
             return {counter: state.counter - 1}

         case 'INCREMENT':
             return {
                ...state,
                counter: state.counter + 1
             }
         case 'DECREMENT':
             return {
                ...state,
                counter: state.counter - 1
             }

正如Alexander在这里所做的，您的reducer还需要使用Object.assign，因为它返回的是一个整数（新计数），而不是定义为初始状态的state对象，例如{counter:1}。@Alexander-t，谢谢您的帮助。如果你也能给我一个
提供者
的例子，我真的很感激。请……。@亚历山大。你太棒了，谢谢，你能告诉我一些关于事件的事情吗，我的意思是在普通的html+JS中我们写为onclick=somethg（），这只在你点击特定元素时执行，但在react中我们不应该像
onclick=somethg（）
，它应该像
onclick={somethg}
那样没有（和）