Redux状态管理

Question

我正在使用React和Redux制作我的第一个应用程序。我的州将需要存储一些列表，其中将有一个作者和一个标题，在每个列表上，我将存储10个项目(网址，描述等)。我正在努力寻找一种好的方法来组织我的状态，以便易于管理和扩展。经过一些研究，我决定使用带有ID的对象，而不是数组。我的操作如下所示：

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 reducer看起来像这样

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 reducer，使每个轨道都有列表的Id？这种方法正确吗?或者我应该使用ADD_LIST操作来添加曲目？

Answer 1

您需要将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
  };

关于你的第二个问题:是的，这是正确的。Redux指南说，你最好使用Redux指南中的声明式操作。AddTrack必须有自己的名为ADD_TRACK的操作或任何方便你的方式。