Question

我正在使用React和Redux创建我的第一个应用程序。我的州需要存储一些具有作者和标题的列表，并且在每个列表中，我将存储10个项目（URL，描述等）。我正在努力寻找一种方法来保持我的国家有条不紊，这样便于管理和扩展。经过一些研究，我决定使用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减速器的最佳方法是什么，以便每个轨道都有列表的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
  };

PS关于你的第二个问题：是的，这是对的。您最好使用声明性操作，如Redux指南中所述。 AddTrack必须有自己的名为ADD_TRACK的动作或任何方便的方式。

Redux国家管理

1 个答案: