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

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
}
}

更新现在，我正在使用 initialState 对象将所有化简器的初始状态设置为默认值。但是，spread 运算符语法现在的功能与以前完全相同，即在 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

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

Answer 2

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

像这样尝试

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

Answer 3

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

这个新错误发生在我自己的组件文件中，在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}
}

希望它对某人有所帮助！