具有 object.assign 的 Redux reducer 在具有相同名称的顶级键中创建键

Question

我正在尝试从我在 Medium 上学到的关于 Redux 的简单示例转变为使用 object.assign 或扩展运算符正确修改不可变状态。但是，在我尝试之后，它会在原始状态密钥中创建一个同名的密钥。 F.e。我有一个状态键 searchPage: 1，在转换减速器后我得到了 searchPage: {searchPage: 1}。我敢打赌这很愚蠢，但我是根据 Redux 文档做的（我只是假设）。我试过 object.assign 和展开运算符，结果相同。这是我的旧减速机：

export function searchPage(state = 1, action) {
  switch (action.type) {
    case 'SET_SEARCH_PAGE':
      return action.searchPage

    default:
      return state
  }
}

和新的扩展运算符：

export function searchPage(state = 1, action) {
  switch (action.type) {
    case 'SET_SEARCH_PAGE':
      return { ...state, searchPage: action.searchPage }

    default:
      return state
  }
}

update 现在，我正在使用一个 initialState 对象将所有 reducer 的初始状态设置为一个对象作为默认值。但是，扩展运算符语法现在与以前完全相同，即在 searchPage 键中插入初始状态键，所以我最终仍然在 searchPage 键中使用对象而不是数字。这是更新后的代码，我不知道我是否朝着正确的方向前进：

const initialState = {
  posts: [],
  postsHasErrored: false,
  postsIsLoading: false,
  searchString: '',
  searchCategories: [],
  searchPage: 10
}

export function searchString(state = initialState.searchString, action) {
  console.log(state)
  switch (action.type) {
    case 'SET_SEARCH_STRING':
      return action.searchString

    default:
      return state
  }
}

export function searchCategories(state = initialState.searchCategories, action) {
  switch (action.type) {
    case 'SET_SEARCH_CATEGORIES':
      return action.searchCategories

    default:
      return state
  }
}

export function searchPage(state = initialState.searchPage, action) {
  switch (action.type) {
    case 'SET_SEARCH_PAGE':
      return { ...state, searchPage: action.searchPage }

    default:
      return state
  }
}

Answer 1

这取决于您的 action.searchPage 价值观。我认为这是一个对象。一旦通过 action 对象的调试。

这样试试

export function searchPage(state = {}, action) {
  switch (action.type) {
    case 'SET_SEARCH_PAGE':
      return { ...state, searchPage: action.searchPage };

    default:
      return state
  }
}

Answer 2

我也有这个问题。通过在线研究，我看到有人说你只需要在操作中将你的状态初始化为空，虽然这在我只使用状态中的一个项目时帮助了我，但当我需要两个时它就走下坡路了。

这个新错误发生在我自己的组件文件中，位于 mapStateToProps。因为这有效...

const mapStateToProps = state => (
   state.posts
);

但这并不...

const mapStateToProps = state => (
   state.posts, state.comments
);

所以我最终会写...

const mapStateToProps = state => ({
   posts: state.posts,
   comments: state.comments
});

这会重复键名，导致数组为 posts.posts 和 comments.comments。在尝试了许多不同的语法之后，我终于找到了有效的方法：

function mapStateToProps(state){
  const { posts } = state.posts
  const { comments } = state.comments
  return { posts, comments}
}

希望对大家有所帮助！

Answer 3

刚刚收到这个旧问题的更新。现在，当我看它时，它是显而易见的。在 reducer 中，当初始化 state = initialState.searchPage 时，它应该只是 state = initialState，整个 reducer 应该只是一个函数，这样我就可以利用 switch 语句的用例。

具有 object.assign 的 Redux reducer 在具有相同名称的顶级键中创建键

Redux reducer with object.assign creates key inside a top key with the same name

reactjs

redux

state

immutability

spread-syntax