在 React Redux reducer 中更新数组对象

Question

这应该很简单，但我没有找到我想要的简单答案。我有一个减速器：

const posts = (state = null, action) => {
  switch(action.type){
    case "PUBLISH_POST":
        return state;
    case "UNPUBLISH_POST":
        return state;
    default:
        return postList;
  }
}

我有一个带有ID 和status 的帖子列表。我正在发送我的帖子 ID，但无法弄清楚将已单击项目的 status 从 0 更新为 1 的逻辑。我找到了很多半解决方案，但它们都显得冗长而丑陋 - 在这种情况下，实现它的最短/最佳方法是什么？

示例数据：

{
    id:1,
    user:"Bob Smith",
    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate mauris vitae diam euismod convallis. Donec dui est, suscipit at dui vitae, sagittis efficitur turpis. ",
    status:1 
}

Answer 1

假设您的 action 类似于：

{
  type: 'UNPUBLISH_POST',
  payload: {
    id: 1,
    user: 'Bob Smith',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate mauris vitae diam euismod convallis. Donec dui est, suscipit at dui vitae, sagittis efficitur turpis. ',
    status: 1
  }
}

只需使用spread operator 即可：

const posts = (state = null, action) => {
  switch(action.type){
    case "PUBLISH_POST":
    case "UNPUBLISH_POST":
        const index = this.state.findIndex(post => post.id === action.payload.id)

        return [
           ...state.slice(0, index), // everything before current post
           {
              ...state[index],
              status: action.type === 'PUBLISH_POST' ? 1 : 0,
           },
           ...state.slice(index + 1), // everything after current post
        ]
    default:
        return postList;
  }
}

Answer 2

一个更通用的解决方案，特别是如果 state 包含除 posts 数组之外的其他数据：

const posts = (state = null, action) => {
  const post = state.posts.find(p => p.id === action.payload.id);
  switch(action.type) {
    case "PUBLISH_POST":
      return { ...state, posts: [ ...state.posts.filter(p => p !== post), { ...post, status: 1 } ] };
    case "UNPUBLISH_POST":
      return { ...state, posts: [ ...state.posts.filter(p => p !== post), { ...post, status: 0 } ] };
    default:
      return state;
  }
}

Answer 3

假设您有一个帖子数组，您可以搜索要修改的帖子的 ID，然后对其进行更新。

你的初始状态：

const initial = {
   posts: [],
}

你的减速器：

case MODIFY_POST:
        return {
            ...state, //Returns the current state
            posts: state.posts.map(post=> post.id === action.id ? // Loop through the array to find the post you want to modify
                { ...post, status: action.status} : post // Copy the post state and then modify it. Else return the same object.
            )
        }

现在，在您的操作中，您可以使用两个操作来切换状态：

export const enablePost= (post_id) => {
return {
    type: MODIFY_POST,
    id: post_id,
    status: 1
    }
}
export const disablePost= (post_id) => {
return {
    type: MODIFY_POST,
    id: post_id,
    status: 0
    }
}

Answer 4

您可以在您的状态上使用扩展运算符，它会自动按照您想要的方式更新它。

示例：

    import { GET_ALL_PENDING_DATAOPS, CHANGE_DATAOPS_ASSIGNED_TO } from "../Actions/types";
const initialState = {
  requests: null
};
export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case GET_ALL_PENDING_DATAOPS:
      return {
        ...state,
        requests: payload
      };
      case CHANGE_DATAOPS_ASSIGNED_TO:          
        return {
          ...state,      
          requests:payload         
        }
    default:
      return state;
  }
}

我的 CHANGE_DATAOPS_ASSIGNED_TO 操作映射了以前的状态，在我的 axios 调用中，我正在从请求数组中更新单个请求对象，因为它返回单个对象，并且我没有明确地将其作为状态返回，我我正在使用传播，它只更新那个对象，其余的不理会。