Javascript 如何在react redux中返回组合还原剂？

我试图在测试项目中使用react-redux来管理状态和道具

例如，请考虑此代码：（index .js）

import React，{Component}来自“React”
从'react dom'导入{render}
从“react redux”导入{Provider}
从“redux”导入{createStore，CombineReducer}
从“./Counter”导入计数器
函数计数器减缩器（状态={count:0}，操作）{
开关（动作类型）{
案例“增量”：
返回{count:state.count+1}
打破
“减量”一案：
返回{count:state.count-1}
打破
违约：
返回状态
}
}
函数newsReducer（状态={news:'defaultnews'}，操作）{
开关（动作类型）{
案例一：
return{news:'这是新闻一号'}
打破
案例二：
return{news:'这里是新闻二'}
打破
违约：
返回状态
}
}
const combine=组合减速机({
减速机，
新闻减速器，
})
常量存储=创建存储（合并）
渲染(
,
document.getElementById（'root'））
)

当您使用

combineReducer

时，您会得到以下状态形状：

{
   count: ...,
   news: ...
}

由于还原器返回对象，因此实际状态为：

{
   count: { count: ... },
   news: { news: ... }
}

{
   count: 0,
   news: 'default news'
}

简单的解决方案是返回不带包装对象的值：

function counterReducer(state = 0, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state.count
            break
        case 'DECREMENT':
            return state.count - 1
            break
        default:
            return state
    }
}

function newsReducer(state = 'default news', action) {
    switch(action.type) {
        case 'ONE':
            return 'This is News one'
            break
        case 'TWO':
            return 'This is News two'
            break
        default:
            return state
    }
}

现在，国家将：

{
   count: { count: ... },
   news: { news: ... }
}

{
   count: 0,
   news: 'default news'
}

---

问题是，您的reducer案例不尊重存储的先前状态，而是使用全新的对象覆盖它。请尝试此已编辑的代码，以便更好地理解

function counterReducer(state = {count: 0}, action) {
    switch(action.type) {
        case 'INCREMENT':
            return { ...state, count: state.count + 1 }
            break;
        case 'DECREMENT':
            return { ...state, count: state.count - 1 }
            break
        default:
            return state
     }
}

function newsReducer(state = {news: 'default news'}, action) {
    switch(action.type) {
        case 'ONE':
            return { ...state, news: 'This is News one' }
            break
        case 'TWO':
            return { ...state, news: 'This is News two' }
            break
        default:
            return state
    }
}

{…state，fieldToEdit:'value'}是一条语句，表示保留状态的所有值，但只更改我提供的键。 你的商店对象就像

{
    count: 0,
    news: 'Default news'
}

使用{…state，count:1}意味着

{
    news: 'Default news',
    count: 1
}

其中，您只是覆盖了整个对象。像这样

{
    count: 1
}

注意：…状态是您也可以使用的es6扩展运算符

Object.assign({}, state, { count: 1 }) 

对于es5

此外，请检查CombineReducer中使用的键的名称，并使用相同的键访问组件中的数据，在您的情况下，该组件是counterReducer，因此您必须访问类似state.count的计数器