Question

在我的反应应用程序中，我预先加载了一个名为activeWord的减速器。

activeWord: 0

然后我在根减速器中添加了activeWord

import {combineReducers} from 'redux';
import activeWord from './ActiveWordReducer';

const root_reducer=combineReducers({

    activeWord:activeWord
});

export default root_reducer;

然后在ActiveWordReducer档案中：

export default function WordReducer(state=null,action){
    switch(action.type){
      case "Active_Word":
        return state.activeWord++;
    }
    return 0;
}

问题是，在行state.activeWord++中，它会生成错误：

Uncaught TypeError: Cannot create property 'activeWord' on number '0'

那么我该如何解决这个问题？

更新：

在reducer中我也尝试返回状态但仍然遇到了同样的错误：

export default function WordReducer(state=null,action){
    switch(action.type){
      case "Active_Word":
        return state.activeWord++;
    }
    return state;
}

Answer 1

问题是你的reducer会将0作为状态返回。

初始化应用程序状态时，将调用所有reducer。由于WordReducer返回0，ActiveWordReducer默认状态为0。

如果您触发操作Active_Word，则需要在activeWord状态下阅读ActiveWordReducer。但这是不可能的，因为状态是0。这就像在做0.activeWord。解决方案是：

var defaultState = {activeWord : 0};

export default function WordReducer(state=defaultState ,action){
  switch(action.type){
    case "Active_Word":
      return state.activeWord++;
  }
  return state;
}

因此，如果还原器中的状态尚未初始化，则会创建状态{activeWord : 0}

请注意，如果没有任何state符合您的切换案例，则您的reducer必须始终返回action.type参数。

Answer 2

我想提一下三个问题：

函数combineReducers接受一个对象，其中key是reducer函数的名称，value是应该传递给该reducer的state属性的名称。那么，对于你的情况，应该是这样的， const root_reducer = combineReducers({ activeWord: activeWord }); 但是，如果你有一个名为activeWord的缩减器最终调用WordReducer，那么请忽略这个建议。也许，您想将WordReducer重命名为wordReducer。
在WordReducer函数中，state现在代表activeWord。所以，这只是一个数字。这就是你得到这个错误的原因。
不要改变你的对象。只需返回state + 1。并保持不变的全部上限。

所以，你的减速机应该是这样的， export default function WordReducer(state = 0, action) { switch(action.type) { case "ACTIVE_WORD": return state + 1; default: return state; } }

未捕获的TypeError：无法在数字'0'上创建属性'activeWord'

2 个答案: