Redux State Management - PullRequest
Новая
       6

Redux State Management

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

Я делаю свое первое приложение, используя React и Redux. Мое государство должно будет хранить несколько списков, которые будут иметь автора и заголовок, и в каждом списке я буду хранить 10 элементов (URL, описание и т. Д.). Я изо всех сил пытаюсь найти хороший способ держать свое состояние организованным так, чтобы легко управлять и масштабировать. После некоторых исследований я решил использовать объекты с идентификаторами вместо массива. Мои действия выглядят так: 

const addList = (
  {
    id,
    listAuthor = '',
    listTitle = '',
  } = {}
) => {
  return {
    type: 'ADD_LIST',
    id: uuid(),
    list: {
      listAuthor,
      listTitle,
    }
  }
};

const addTrack = (
  {
    id,
    url = '',
    trackInfo = '',
    description = '',
  } = {}
) => ({
  type: 'ADD_TRACK',
  track: {
    id: uuid(),
    url,
    trackInfo,
    description
  }
});

Мой редуктор ADD_LIST выглядит следующим образом 

export default (state = listReducerDefaultState, action) => {
  switch (action.type) {
    case 'ADD_LIST':
      return {
        listIdArray: [...state.listIdArray, action.id],
        listById: {
          ...state.listById,
          [action.id]: action.list,
        }
      };

Как лучше всего написать мой редуктор ADD_TRACK, чтобы у каждой дорожки был идентификатор в списке? И правильный ли это подход или я должен добавлять дорожки с помощью действия ADD_LIST?

1 Ответ

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

Вам необходимо добавить поле listId для действия addTrack и указать путь к нему как к другим реквизитам. 

const addTrack = ({id,url = '',trackInfo = '', listId='',description = '',} = {}) => ({
  type: 'ADD_TRACK',
  track: {
    id: uuid(),
    listId,
    url,
    trackInfo,
    description
  }
});


addTrackReducer (state = {}, action) => {
  switch (action.type) {
    case 'ADD_TRACK':
      return action.track
  };

PS По поводу вашего второго вопроса: да, это правильно. Вам лучше использовать декларативные действия, как сказано в руководствах Redux. AddTrack должен иметь собственное действие с именем ADD_TRACK или любым удобным для вас способом.

...