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

Posted 2023-02-22

【中文标题】带有 object.assign 的 Redux reducer 在同名的顶部键中创建键

【英文标题】：Redux reducer with object.assign creates key inside a top key with the same name

【发布时间】：2017-12-29 16:04:36

【问题描述】：

我正在尝试从我在 Medium 上学到的关于 Redux 的简单示例转变为使用 object.assign 或扩展运算符正确修改不可变状态。但是，在我尝试过之后，它会在原始状态键中创建一个具有相同名称的键。 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
  

更新 现在，我使用 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
  

【问题讨论】：

你的新旧reducer实现了不同的行为。在第一种情况下，all 状态是简单数字，因此您将其替换为新数字。在第二种情况下，您始终通过 Object.assign 创建新对象，您的扩展运算符被转译到该对象。

那我该如何克服呢？我应该保持原样还是更改整个应用程序的初始状态？我遇到的问题是我的 React 应用程序在 f.e. 之后没有重新渲染。 searchPage 是在 state 中更新的，所以我认为是因为我修改 state 的方式。这是我的应用程序的更多代码***.com/questions/45256875/…

【参考方案1】：

这取决于您的 action.searchPage 值。我认为这是一个对象。一旦对action 对象进行调试。

这样试试

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

    default:
      return state
  

【讨论】：

action.searchPage 始终是一个整数。

@MateuszMysiak 你确定吗？如果是这样，请使用更新的答案中的空对象初始化您的 state。

我已经做到了。结果还是一样。在我的应用程序状态中有searchPage: searchPage: 1 而不是searchPage: 1

【参考方案2】：

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

这个新错误发生在我自己的组件文件mapStateToProps。 因为这行得通...

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

但这并不...

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

所以我最终会写...

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

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

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

希望对某人有所帮助！

【参考方案3】：

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