用状态反应对象的redux更新状态

Question

When my component mounts I get from an API and when successful my state looks like this,

    {
        "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
   }

What I am wanting to mark a task as complete, but I am confused over my reducer and action, the flow is the user clicks a button with fires the action, which posts to my api, which responds with an updated task object. However I am confused as to how I go about moving that updated task object into my state as the object is within an array within the state? Can anyone help me out?

This is my action,

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
    });
  });
};

And this is my reducer,

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;
  }
}

Now my feeling is that my initial state will clear any previous state? secondly how do I move the returned payload into the correct task object?

Answer 1

What does the response from your API /api/tasks/complete look like ? Is your API supposed to complete a task or retrieve a list of tasks ?

Anyway, you usually would use Array.prototype.map , Array.prototype.filter and Array.prototype.reduce in your reducers, eg if your API is for marking a task as complete and returns the id of the task that has been properly marked as completed, then your reducer would maybe look like this :

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;
  }
}