Question

尝试设置一个非常基本的redux计数器应用程序

这有效：

const initialState = {
  counter: 0
}

const reducer = (state = 0, action) => {
  switch(action.type){
    case 'ADD':
      return state + 1
  }
  return state
}

const mapStateToProps = state => ({
  counter: state
})
const mapDispatchToProps = dispatch => ({
  add: () => {
    dispatch(addAction())
  }
})

const addAction = (value) => ({
  type: 'ADD',
  value
});

const Main = ({add, counter}) => (
  <div>
    Counter: {counter}
    <button onClick={add}> Add </button>
  </div>
)

我得到了所有这一切，它触发了我的动作并将其递增1.然而，当我更改减速器时这样

const reducer = (state = initialState, action) => {
  switch(action.type){
    case 'ADD':
      return state.counter + 1
  }
  return state
}

它会将0变为1，但随后每次点击它都会返回NaN并且我无法调试以找出原因。我必须丢失一些小的东西，我知道我不想改变原来的计数器并创建一个新的但我不知道如何做到这一点而不打破它。有什么建议吗？

Answer 1

初始状态是一个具有一个字段的对象：counter。

const initialState = {
  counter: 0
}

在此减速器中，您将在ADD情况下返回一个数字。

const reducer = (state = initialState, action) => {
  switch(action.type){
    case 'ADD':
      return state.counter + 1
  }
  return state
}

在一次ADD调度之后，状态将替换为一个简单的数字（state = 1）。因此，当您发送另一个添加时，您将在该号码上运行return state.counter + 1。因此，您必须重写reducer以处理整个对象。

const reducer = (state = initialState, action) => {
  switch(action.type){
    case 'ADD':
      return {
         ...state,
         counter: state.counter + 1
      };
  }
  return state
}

您还必须稍微重写视图逻辑。

const mapStateToProps = state => ({
  counter: state.counter
})

Answer 2

我之前有同样的错误，但导入这两个模块后效果很好。

import { StateProvider } from './StateProvider';

import reducer, { initialState } from "./reducer";

redux初始状态不起作用

2 个答案: