реагировать на редукс обновления состояния объекта с состоянием

Question

Когда мой компонент монтируется, я получаю от API, и когда успешно, мое состояние выглядит следующим образом:

    {
        "brief":"No brief given",
        "tasks":[
            {
                "_id":"5c74ffc257a059094cf8f3c2",
                "task":"87 Development Task 7",
                "project":"5c7458abd2fa91567f4e4f03",
                "date_created":"2019-02-26T08:58:42.260Z",
                "__v":0
            }
        ],
        "_id":"5c7458abd2fa91567f4e4f03",
        "owner":{
            "_id":"5c5af553eea087426cd5f9b9",
            "name":"Test test",
            "email":"test@test.com",
            "avatar":"placeholder.jpg",
            "created_at":"2019-02-06T14:55:15.321Z",
            "__v":0
        },
        "name":"87 Development Project 1",
        "status":"Pending",
        "slug":"87-development-project-1",
        "created_at":"2019-02-25T21:05:47.643Z",
        "__v":0
   }

То, что я хочу пометить задачу как выполненную, но я смущен из-за моего редуктора и действияПоток - это то, что пользователь нажимает на кнопку, запускает действие, которое отправляет мой API, который отвечает обновленным объектом задачи.Однако я не совсем понимаю, как мне перевести этот обновленный объект задачи в мое состояние, поскольку объект находится внутри массива в этом состоянии?Кто-нибудь может мне помочь?

Это мое действие,

import axios from "axios";

import { COMPLETE_TASK } from "./types";

// Set logged in user
export const completeTask = id => dispatch => {
  axios.post(`/api/tasks/complete`, { id }).then(res => {
    dispatch({
      type: COMPLETE_TASK,
      payload: res.data
    });
  });
};

А это мой редуктор,

import { COMPLETE_TASK } from "../actions/types";

const initialState = { project: { tasks: [], owner: {} } };

export default function(state = initialState, action) {
  switch (action.type) {
    case COMPLETE_TASK:
      return {
        ...state,
        ????
      };
    default:
      return state;
  }
}

Теперь я чувствую, что мое первоначальное состояние будеточистить любое предыдущее состояние?во-вторых, как мне переместить возвращенную полезную нагрузку в правильный объект задачи?

Answer 1

Как выглядит ответ от вашего API /api/tasks/complete?Ваш API должен выполнить задачу или получить список задач?

В любом случае, вы обычно используете Array.prototype.map , Array.prototype.filter и Array.prototype.reduce в ваших редукторах, например, если ваш API предназначен для маркировки задачи как завершенной и возвращает идентификатор задачи, которая была должным образом помечена как завершенная, то ваш редуктор может выглядеть следующим образом:

export default function(state = initialState, action) {
  switch (action.type) {
    case COMPLETE_TASK:
      return {
        ...state,
        tasks: state.tasks.filter((task) => {
          return task.id !== action.taskToCompleteId
        })
      };
    default:
      return state;
  }
}