Добавление нового объекта массива во вложенный массив в редукторе React redux и массив в обновлениях магазина, но не в компонент React

Question

Я новичок в React и redux. У меня есть задание вроде добавления рабочих процессов, а внутри рабочих процессов есть задачи. Я могу добавить новый объект рабочего процесса в массив состояний .... но когда дело доходит до добавления новой задачи, он добавляется непосредственно в массив рабочего процесса, а не в массив задач. Вот моя структура массива

const initialState = 
{ WORKFLOWS: 
[{ id: 1, Title: 'testdata1', Status: 'Completed',
 Tasks: [{ id: 1, Title: 'Task1', Content: 'Test Content', Status: 'Pending' }, { id: 2, Title: 'Task2', Content: 'Test Content2', Status: 'Pending' }] }, 
{ id: 2, Title: 'testdata2', Status: 'Pending', 
Tasks:[ { id: 2, Title: 'Task1', Content: 'Test Content', Status: 'Pending' }] }], workflowid: 3, isloading: false};

, а вот мои редукторы

   export const reducer = (state, action) => {

state = state || initialState;

if (action.type === ADD_WORKFLOW) {

    return {
        ...state,
        WORKFLOWS: [...state.WORKFLOWS, { id: state.workflowid++, Title: 'Workflow' + state.workflowid, Status: 'Pending', Tasks : [] }]
        //WORKFLOWS: [...state.WORKFLOWS, [{ id: state.workflowid++, Title: 'Workflow' + state.workflowid, Status: 'Pending' }]]
    };
   }

if (action.type === EDIT_WORKFLOWTITLE) {
    const index = state.WORKFLOWS.map(item => item.id).indexOf(action.itemid);
    console.log(index);
    return {
        ...state, WORKFLOWS: [...state.WORKFLOWS.map(todo =>
            todo.id === action.itemid ? { ...todo, Title: action.itemtitle } : todo
        )]
    } 
}
if (action.type === EDIT_WORKFLOWSTATUS) {

    return {
        ...state, WORKFLOWS: [...state.WORKFLOWS.map(todo =>
            todo.id === action.itemid ? { ...todo, Status: (todo.Status === 'Pending') ? 'Completed' : 'Pending' } : todo
        )]
    }
}
if (action.type === DELETE_WORKFLOW) {
    const index = state.WORKFLOWS.map(item => item.id).indexOf(action.payload);

    return { ...state, WORKFLOWS: [...state.WORKFLOWS.slice(0, index).concat(state.WORKFLOWS.slice(index + 1))] };
}
if (action.type === ADD_TASK) {
    console.log(state.WORKFLOWS);
    return {
        ...state,
        WORKFLOWS: [...state.WORKFLOWS,
            {
               Tasks: [...state.WORKFLOWS[1], { id: state.workflowid++, Title: 'Workflow' + state.workflowid, Content: 'Workflow' + state.workflowid, Status: 'Pending' }]

        }]


    };

}

  return state;
   };

Я столкнулся с проблемой с действием add_task, и вот мой результат при нажатии на задачу добавления

0: {id: 1, Title: "testdata1", Status: "Completed", Tasks: Array(2)}
 1: {id: 2, Title: "testdata2", Status: "Pending", Tasks: Array(1)}
  2: {Tasks: Array(1)}

Я также пробовал, чтобы приведенный ниже массив кода обновлялся, но не вид не обновляется.

   if (action.type === ADD_TASK) {
       let obj = { id: state.workflowid++, Title: 'Workflow' + state.workflowid, Content: 'Workflow' + state.workflowid, Status: 'Pending' };
    let newarray = [];
    newarray = state.WORKFLOWS;
    newarray[1].Tasks.push(obj);
    console.log(newarray);
    console.log(state.WORKFLOWS)
    return {...state, WORKFLOWS: newarray};

}

Answer 1

После всех моих следов. Я создал новый массив и передал его как полезную нагрузку в действии и назначил его массиву состояний в redux.

 if (action.type === ADD_NEWTASK) {

    state.WORKFLOWS = [];
    return { ...state, WORKFLOWS: action.data };
}

Это сработало для меня ... Вот что я сделал в компоненте.

      addingtask =() => { 
     console.log('Button Clicked');
     let i = this.props.WORKFLOWS[0].Tasks.length;
     let obj = { id: i+1, Title: 'Test' + 1, Content: 'Test' + 2, Status: 'Pending' };
     let newarray = [];
     newarray = this.props.WORKFLOWS;

     newarray[0].Tasks.push(obj);

     this.props.addnewtask(newarray);





}

Answer 2

Надеюсь, это поможет.

if (action.type === ADD_TASK) {
    console.log(state.WORKFLOWS);
    return {
    ...state,
        WORKFLOWS: [...state.WORKFLOWS,
                    { id: state.workflowid++, Title: 'Workflow' + state.workflowid, Content: 'Workflow' + state.workflowid, Status: 'Pending', 
                       Tasks: [ { id: 3, Title: 'Task3', Content: 'Test Content', Status: 'Pending' }]
                    }]
      };
}