在这种情况下，Redux 删除本地状态是否正常？

Question

我很难理解 Redux，并且在点击 React 页面上的按钮时失去了本地状态。情况如下：

假设您在 React 页面上，它有一个本地状态：

{"player": "PersonA"}

同一个 React 页面上还有一个按钮。按下按钮会触发 Redux 操作。关联的控制器方法 returns:

return res.status(200).json({
    statusCode: 200,
    success: true,
    payment: {"amount": "3", "currency": "EUR"},
});

和减速器：

case APPLY_SUCCESS:
    console.log(...state); // returns undefined
    return { ...state, paymentData: action.payload.payment };

在 React 页面点击按钮后，本地状态只包含 paymentData。所以 player 从本地状态消失了。我认为 reducer 中的 ...state 应该确保维护不受操作影响的现有本地状态。所以它只会将 paymentData 附加到本地状态并保留 player.

我的问题：

我是否正确认为减速器中的 ...state 应该确保不受操作影响的本地状态仍然是本地状态的一部分？
如果是这样，...state 未定义的原因可能是什么？如何确保 player 仍然是本地状态的一部分？

Answer 1

console.log(...state) 可能会抛出类型错误，因为传播通常在数组和对象内部进行。

然而，您 return {...state, paymentData: data} 的第二部分应该按您预期的那样工作，只有 paymentData 从状态更改，因为 {...state} 只是制作状态的浅表副本对象（不深），然后替换此副本中的 paymentData 键。

如果您正在使用深层嵌套的键，我会研究 lodash 的 deepClone 函数来创建状态的深拷贝，而不是浅拷贝，以防止直接写入 redux 状态（并产生意外错误）

建议：

检查 console.log(state) 是否未定义或为空对象。

如果是这样，状态没有被传递到减速器，或者没有正确初始化，你应该检查它是如何传递的。

确保减速器遵循此模型以正确初始化它。这取自 redux 自己的 docs，您可以在那里查看更多示例。

const initialState = {
  todos: [
    { id: 0, text: 'Learn React', completed: true },
    { id: 1, text: 'Learn Redux', completed: false, color: 'purple' },
    { id: 2, text: 'Build something fun!', completed: false, color: 'blue' }
  ],
  filters: {
    status: 'All',
    colors: []
  }
}

// Use the initialState as a default value
export default function appReducer(state = initialState, action) {
  // The reducer normally looks at the action type field to decide what happens
  switch (action.type) {
    // Do something here based on the different types of actions
    default:
      // If this reducer doesn't recognize the action type, or doesn't
      // care about this specific action, return the existing state unchanged
      return state
  }
}

在这种情况下，Redux 删除本地状态是否正常？

Is it normal Redux removes a local state in this situation?

javascript

reactjs

redux