React Native中Redux多Reducer操作状态时intToFollow出现NaN问题

为什么intToFollow会变成NaN？ #

十有八九是ACTION_2里对intToFollow的运算涉及非数值类型：

• 比如你写了state.intToFollow + action.payload，但action.payload是undefined、字符串或者其他非数字值，直接导致结果成了NaN。
• 先检查ACTION_2的action创建函数，确保传的payload是明确的数字（比如+1、-1这类）；再确认intToFollow的初始值是有效数字（比如0，不是undefined或空串）。

同一状态能不能被多个Reducer连续操作？ #

完全可以，但要守两个规矩：

• 所有Reducer都必须返回新状态对象，绝对不能直接修改原state（比如别写state.intToFollow++，要写成{ ...state, intToFollow: state.intToFollow + 1 }）。
• 多个Reducer处理同一状态时，只要每个Reducer都正确读取当前最新的state值，逻辑就不会冲突——Redux会按顺序执行Reducer，每个Reducer拿到的都是前一个处理后的状态。

修复ACTION_2无法正确获取intToFollow的问题 #

先检查ACTION_2对应的Reducer代码，确保这几点：

1. 变量名没写错（比如别把intToFollow拼成intToFollw），正确读取state里的该值。
2. 严格遵循状态不可变性，给你个参考示例：

const chatReducer = (state = { intToFollow: 0 }, action) => {
  switch(action.type) {
    case 'ACTION_1':
      const nextInt1 = state.intToFollow + 1;
      return {
        ...state,
        intToFollow: nextInt1,
        currentEng: dialogEng[nextInt1],
        currentFr: dialogFr[nextInt1]
      };
    case 'ACTION_2':
      // 先确保payload是数字，默认给0防止出错
      const step = typeof action.payload === 'number' ? action.payload : 0;
      const nextInt2 = state.intToFollow + step;
      // 加个边界判断，防止数组越界取undefined
      const safeInt = Math.max(0, nextInt2);
      return {
        ...state,
        intToFollow: safeInt,
        currentEng: dialogEng[safeInt],
        currentFr: dialogFr[safeInt]
      };
    default:
      return state;
  }
};

• 注意：更新currentEng和currentFr时，要用计算后的新索引，别用原state的intToFollow，避免索引不匹配。
• 触发ACTION_2时，确保payload是正确数值：

const triggerAction2 = () => ({
  type: 'ACTION_2',
  payload: -1 // 明确的步长数值
});

快速排查小技巧 #

在ACTION_2的Reducer分支里加个打印：

case 'ACTION_2':
  console.log('当前intToFollow:', state.intToFollow, 'payload:', action.payload);
  // 后续逻辑...

直接看控制台输出，就能立刻知道是state里的intToFollow没读到，还是payload有问题。

内容的提问来源于stack exchange，提问作者W B