Как создать новый ключ для элемента состояния Redux? - PullRequest
0 голосов
/ 22 мая 2018

У меня небольшие проблемы с выяснением, как лучше всего добавлять новые элементы в состояние React / Redux с новыми ключами.

Учитывая состояние:

const initialState = {
  "routines": {
    "1": {
      "id": 1,
      "name": "Routine 1",
    },
    "2": {
      "id": 2,
      "name": "Routine 2",
    }
  }
}
* 1005Допустим, я хочу добавить новый элемент в это состояние.Где я должен поместить логику для создания нового идентификатора?
  1. Должно ли это быть свойство формы, отправка которой вызывает действие ADD_ROUTINE?
  2. Должна ли логика генерации нового идентификатора находиться в редукторе?

Вот моя лучшая попытка, но мне интересно, есть ли лучший способ сделать это.

import { ADD_ROUTINE } from '../actions/routineActions'

function routineReducer(state={}, action) {
  switch (action.type) {
    case ADD_ROUTINE:
      newState = {...state}
      number_of_keys = Object.keys(newState).length
      new_id = number_of_keys + 1
      return {
        ...state,
        new_id: {
          id: new_id,
          name: action.name,
          days: []
        }
      }
    default:
      return state
  }
}

export default routineReducer

1 Ответ

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

Следуя моим комментариям и предложениям по изменению структуры, вот как я бы написал ваш редуктор:

import { ADD_ROUTINE } from '../actions/routineActions'

// important: this assumes changing the structure
// of the initial state to the following:
// routines = [
//   { id: 1, name: 'routine 1' },
//   { id: 2, name: 'routine 2' },
// ]

function routineReducer(state=[], action) {
  switch (action.type) {
    case ADD_ROUTINE:
      return [
        ...state,
        {
          id: state[state.length - 1].id + 1,
          name: action.payload,
        }
      ]
    default:
      return state
  }
}

export default routineReducer

Даже с этим переписыванием я все еще чувствую, что генерация UUID, совместимых с RFC, с использованием пакета uuid npm будет более чистым решением (независимо от того, как вы структурируете)ваше состояние, массив или объект).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...