如何通过不可变原则迭代更新redux state的每一个key

Question

我的redux状态如下：-

data = {"facebook":true,"twitter":false,"google":false,"instagram":false,"watsapp":false}

我将在行动中传递关键值：-("facebook","twitter")

可以说我通过了“facebook”。 然后我希望将状态更新为

{"facebook":true,"twitter":false,"google":false,"instagram":false,"watsapp":false}

这是我的减速器功能

function data = (state=initialstate,action) => {
   return {...state, [action.account]=true}
}

第一次，它会给出想要的结果。

{"facebook":true,"twitter":false,"google":false,"instagram":false,"watsapp":false}

现在让我们说，我正在传递密钥“twitter”

我想要什么：

{"facebook":false,"twitter":true,"google":false,"instagram":false,"watsapp":false}

我用上面的 reducer 函数得到了什么（如预期的那样）

{"facebook":true,"twitter":true,"google":false,"instagram":false,"watsapp":false}

所以我更新了我的减速器功能如下：-

function data = (state, action) => {
  Object.keys(state).forEach(function(key) {
    if(key!=action.account){
      state[key]=false; 
    } else {
      state[key]=true; 
    }
   });
  return state
}

但这违背了redux 的不可变数据原则。 因为我也在使用选择器，所以它显示了一些意想不到的行为。

如何更新我的 reducer 函数，它将所有以前设置的值设置为 false 并且只将当前键设置为 true 记住 redux 的不可变数据原则

Answer 1

据我了解，您希望将所有键设置为 false，但已调度的 action.account 设置为 true 除外。

const data = (state, action) => {
    let { account } = action
    var newObj = {}

    Object.keys(state).forEach(function(key) {
        newObj[key] = false
    })

    return {...newObj, [account]:true }
}

Answer 2

如果您使用的是Underscore,^*，您可以使用_.map(state, (v, k) => /* logic that returns true/false */) 生成一个新的state 实例，同时保持前一个实例不变。

请注意，感觉更好的数据模型可能只是在您的状态中存储一个字符串，对应于“当前”帐户。

---

_{* 使用Object.entries().... 可以实现等效行为，但它很糟糕，我不想弄清楚:)}

Answer 3

简单地说，使用一个新的空对象，而不是修改原来的状态对象。

function data = (state, action) => {
  const newState = {};
  Object.keys(state).forEach(function(key) {
    if(key!=action.account){
      newState[key]=false; 
    } else {
      newState[key]=true; 
    }
   });
  return newState
}