Добавление объекта во вложенный массив в Reaction-Redux - PullRequest
Новая
       1

Добавление объекта во вложенный массив в Reaction-Redux

0 голосов
/ 22 мая 2019

Я нашел много решений в Интернете, но я приложил все усилия в течение недели и не нашел способа ее решить.Я считаю, что причиной является редуктор ADD_GOAL , поэтому я оставил его пустым.

Большое спасибо!:)

Я хочу добавить объекты в массив goal .Я всегда хочу инициализировать цели пустыми, но я хочу иметь возможность свободно добавлять и удалять объекты.Идея состоит в том, чтобы сохранить объекты следующим образом. 

{
  list: {
    '0': {
      id: 0,
      dueDate: 'By May 28th I Will have: ',
      goals: [
        {0: {...}
         1: {...}
         3: {...}
}
      ]
    }
   '1':{
      id: 0,
      dueDate: 'By June 31st I Will have: ',
      goals: [
        {2: {...}
         4: {...}
  }
}

Редуктор 

export default (state = {}, action) => {
  let copyList = [{ description: '213', aim: 12, progress: 2, percentage: 20 }];
  switch (action.type) {
    case 'ADD_DUEDATE':
      return { ...state, [action.payload.id]: action.payload }
    case 'ADD_GOAL':
      return {

      }
    case 'DELETE_TODO':
      return state.filter((item, index) => index !== action.payload)
    default:
      return state;
  }
}

Компонент 

import React from 'react';
import { connect } from 'react-redux';

class List extends React.Component {
  state = {
    id: 0,
    goalId: 0
  }

  createDueDate = () => {
    this.props.add({
      id: this.state.id,
      dueDate: "By May 28th I Will do something: ",
      goals: [{}]
    })
    this.setState({ id: this.state.id + 1 });
  }

  addGoal = () => {
    this.props.addToList({
      goals:
        [{ id: this.state.goalId, description: '213', aim: 12, progress: 2, percentage: 20 }]
    })
    this.setState({ goalId: this.state.goalId + 1 })

  }

  render() {
    return (
      <div>
        <div>
          <button className="btn btn-secondary" onClick={this.createDueDate}></button>
        </div>

        <div>
          <button className="btn btn-primary" onClick={this.addGoal}></button>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    list: state.list
  }
}

function mapDispatchToProps(dispatch) {
  return {
    add: (value) => {
      dispatch({ type: 'ADD_DUEDATE', payload: value })
    },
    get: (id) => {
      dispatch({ type: 'GET_DUEDATE', payload: id })
    },
    addToList: (value) => {
      dispatch({ type: 'ADD_GOAL', payload: value })
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(List);

1 Ответ

1 голос
/ 22 мая 2019

Предположим, вложенный массив элементов в нашем редукторе: 

const initialState = {
    items : {
        deepItem  :[1, 2, 2],
        reallyDeepItem: {
            a : [1,2,3]
            b : {'a', 'c'}
        }
    }
}

А теперь давайте возьмем 2 действия: одно для добавления элемента на state.items.deepItem, который мы будем называть ADD_DEEP_ITEM, и другое для вставки элемента на state.items.reallyDeepItem.a с именем ADD_DEEPER_ITEM. Давайте напишем наш редуктор: 

const Reducer = (state = initialState, action) =>{
    switch(action.type){
        case 'ADD_DEEP_ITEM': return {
            ...state,
            items : {
                ...state.items,
                deepItem : state.items.deepItem.concat(action.data)
            }
        }

        case 'ADD_DEEPER_ITEM': return{
            ...state,
            items :{
                ...state.items,
                reallyDeepItem:{
                    ...state.items.reallyDeepItem,
                    a : state.itens.reallyDeepItem.a.concat(action.data)
                }
            }
        }
    }
}

Вот и все, правильно обновлено! Просто не забывайте всегда распространять все свойства, а затем переопределять те, которые вы хотите.

...