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) => { … }

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

list

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

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

您希望传播旧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之外添加...state以扩展之前的状态以获得良好衡量标准，假设您将采取多项措施，尽管它仍然是良好的做法。

为什么我可以在Redux商店中访问数组？

1 个答案: