Question

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

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

这取决于您的document.getElementsByClassName("ipsBox table_wrap")[0].style.display ="none";值。我认为这是一个对象。一旦完成action.searchPage对象的调试。

试试这个

action

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

Just got an update of this old issue. Now, when I look at it it's obvious. In the reducer, when initializing state = initialState.searchPage it should just be state = initialState. And the whole reducer should be just one function so that I can utilize the use case for the switch statement.

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

3 个答案: