反应 redux 与给定数组的合并状态

react redux merge state with given array

本文关键字：合并 状态 数组 redux 反应      更新时间：2023-09-26

假设我有一个化简器，它像：

const initialState = [
  {
    accessToken: null,
    isLoggedIn: false,
  }
]
export default function my_reducer(state = initialState, action) {
  switch (action.type) {
    case LOGIN:
        return state.merge(user: action) ---> how to handle this

输出应如下所示：

[
      {
        accessToken: null,
        isLoggedIn: false,
        user: {
            name: 'some name',
            email: 'some email'
      }
    ]

在行动中，我正在通过执行JSON.stringify(response)来获得一个数组

不应更改以前的数据，而应更新新数据

ES6 之道

要创建一个具有 ES6 状态的新对象，我们可以使用 spread 运算符。喜欢这个

...
case ActionType.SUCCESS_GET_DATA : {
    let newState = { ...state, [action.uniqueKey]: action.payload };
    return state.merge(newState);
}
...

我将uniqueKey部分作为变量执行，因为您需要为状态使用唯一的名称。

IMO 这种语法比Object.assign更容易理解

您可以使用 Object.assign（） 函数：

var state = {
    accessToken: null,
    isLoggedIn: false,
};
var user = {
    name: 'some name',
    email: 'some email'
};
var newState = Object.assign({}, state, {user});
console.log(newState);

首先，我看到您的状态实际上是一个数组，但我认为您需要一个对象，对吗？

所以它会是：

const initialState = {
    accessToken: null,
    isLoggedIn: false,
}

（需要 Babel）所以使用点差运算符，你可以：

return {
    ...initialState,
  user: {
    name: '...',
    surname: '...'
  }
};

或者，如果您不通过 Babel 进行转译：

return Object.assign({}, initialState, {
    user: {
    name: '...',
    surname: '...'
  }
});

使用 ES6 扩展语法

...
case 'ACTION_TYPE_A': {
return { ...state, action.key: action.value };
}
...

这将通过更新"密钥"（如果它存在于原始状态）来返回合并状态。

Everything according to new Es6 format : )

一个总的 addToDo 缩减器函数，其中数据被追加到以前的状态。你得到一个新的状态数据的输出：）

export const addToDo = (state, action) => {
const { name, email, phone, image,key } = action;
  var data = [...state.data];
  var newData = {
     name: name, email: email, phone: phone, image: image,key:key 
  }
   data.push(newData)
return(
state.merge({
  data : data
})
)};

快乐编码。

相关文章：