为什么我可以访问我的 Redux 存储中的数组？

Question

我有一个 Redux reducer，我试图在我的 reduce 中嵌套一组对象，但它正在中断。我似乎无权访问数组中的任何内容。但是，如果我从 reducer 返回一个数组而不是一个对象，它就可以正常工作。

const friendReducer = (state = {}, action) => {
  console.log(action);
  switch (action.type) {
    case 'GET_FRIENDS':
      return {
        list: [
          ...state,
          ...action.payload,
        ],
      };
    default:
      return state;
  } 
};

export default friendsReducer;

当我尝试访问我连接的组件中的list 时，我无法访问Array#splice 方法或Array#length 属性。以下是代码的其他相关部分：

const mapStateToProps = (state) => {
  return {
    friends: state.friends,
  }
};

const rootReducer = {
  friends: friendsReducer,
};

const store = createStore(
  combineReducers({
    ...rootReducer,
    router: routerReducer,
  }),
  {}, // initial state
  compose(
    applyMiddleware(thunk),
    applyMiddleware(routerMiddleware(history)),
    // eslint-disable-next-line no-underscore-dangle
    (typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined') ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f,
  ),
);

export default store;

Answer 1

您遇到了一些问题。一方面，friendsReducer 的状态切片返回一个对象，而不是一个数组。所以你的状态看起来像这样：

{
  friends: {
    list: […]
  }
}

所以当你mapStateToProps时，如果你想要数组，它应该是这样的：

return {
  friends: state.friends.list //not state.friends, that's an object
}

接下来，还要注意您的初始状态中不包含list：

const friendReducer = (state = {}, action) => { … }

因此，当您第一次尝试访问list 的length 时，将没有list 属性，因此您必须将其设置为初始状态中的空数组。始终使用所有属性设置初始状态：

const friendReducer = (state = { list: [] }, action) => { … }

最后，您在 reducer 中传播了错误的状态属性：

case 'GET_FRIENDS':
  return {
    ...state, //here use ...state to spread previous state
    list: [
      ...state.list, //not state, use state.list to spread previous list
      ...action.payload,
    ],
  };

你想传播旧的list，所以你应该传播state.list，而不是state本身。此外，您可以在 list 之外添加 ...state 以传播先前的状态以进行良好的衡量，假设您将有多个操作，尽管这是一种很好的做法。