0

我对 redux 有疑问。我正在开发一个应用程序，您可以在其中保存有关您的 youtube 视频的注释。一切正常，但是当我开始添加“ADD_ITEM”操作时，每次在减速器中执行此操作时都会出现相同的错误。我遇到的错误是：TypeError: can't access property Symbol.iterator, state[action.payload.savedVideos] is undefined。我正在使用连接方法和函数 mapDispatchToProps 似乎很好，所以问题可能出在减速器或动作创建器中。这是我的减速器中的添加项目功能：`

 const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        [action.payload.savedVideos]: [...state[action.payload.savedVideos], action.payload.item],
      };

这是我的动作创建者：

 export const addItem = (itemContent, savedVideos) => {
  const getId = () => `_${Math.random().toString(36).substr(2, 9)}`;

  return {
    type: 'ADD_ITEM',
    payload: {
      savedVideos,
      item: {
        id: getId(),
        ...itemContent,
      },
    },
  };
};

和我的初始状态：

const initialState = {
  saves: [
    {
      id: 1,
      title: 'Hello meow',
      created: '18 may 2018',
      link: 'https://www.youtube.com/watch?v=-QmyosHh-kU',
      content: 'Nowy film gargamela!',
    },
    {
      id: 2,
      title: 'Hello meow',
      created: '18 may 2018',
      link: 'https://www.youtube.com/watch?v=-QmyosHa-kU',
      content: 'Nowy film!',
    },
    {
      id: 3,
      title: 'Hello meow',
      created: '18 may 2018',
      link: 'https://www.youtube.com/watch?v=-QmyosHy-kU',
      content: 'Nowy film gorgonzoli!',
    },
    {
      id: 4,
      title: 'Hello meow',
      created: '18 may 2018',
      link: 'https://www.youtube.com/watch?v=-QmyosHy-kU',
      content: 'Nowy film gorgonzoli!',
    },
    {
      id: 5,
      title: 'Hello meow',
      created: '18 may 2018',
      link: 'https://www.youtube.com/watch?v=-QmyosHy-kU',
      content: 'Nowy film gorgonzoli!',
    },
  ],
};
4

2 回答 2

1

https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#creating-the-root-reducer

假设savedVideos来自初始状态，当您添加视频时，您正在添加以下对象，并且您想要添加到您的初始状态（也称为初始存储），您不需要传递savedVideos给动作和减速器。

{
      id: 1,
      title: 'Hello meow',
      created: '18 may 2018',
      link: 'https://www.youtube.com/watch?v=-QmyosHh-kU',
      content: 'Nowy film gargamela!',
},

你的动作可以..

 export const addItem = (itemContent, savedVideos) => {
  const getId = () => `_${Math.random().toString(36).substr(2, 9)}`;

  return {
    type: 'ADD_ITEM',
    payload: {
        id: getId(),
        ...itemContent,
      },
  };
};

你的减速机可以

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, saves: [...state.saves, action.payload]  }
      //or whatever new item u need to add to the state (store).
    case 'DELETE_ITEM': //bonus
      return { ...state, saves: state.saves.filter( x => x.id !== action.payload.id) }
}
于 2021-04-03T06:33:10.737 回答
0

我想解释错误

“TypeError：无法访问属性 Symbol.iterator，状态 [action.payload.savedVideos] 未定义”

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        [action.payload.savedVideos]: [...state[action.payload.savedVideos], action.payload.item],
      };

您在 reducer 中实际执行的操作是从变量更新属性名称。属性名称周围的方括号表示它是一个变量。

属性名称是 的值action.payload.savedVideos。但这不是一个有效的属性名称，因为action.payload.savedVideos它是array(a Symbol.iterator)。

您不需要动态属性名称，因为您总是在更新属性saves。正如@Someone Special 所解释的，您也不需要savedVideos在您的操作中包含现有的，因为您已经可以从状态访问它们。

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        saves: [...state.saves, action.payload.item],
      };
于 2021-04-04T00:20:14.197 回答