Redux 使用双重嵌套创建状态
Redux creates state with double nesting
我有一个 redux 应用程序,除其他外,它更新单个字符串,因此状态可以反映为:
{
theDataString: "someString",
otherData: { ...some other data... },
someListItems: [ ...a data array... ]
}
因此我有以下减速器:
function updateDataString(state = {}, action) {
switch (action.type) {
case UPDATE_DATA_STRING:
return Object.assign({}, ...state, {theDataString: action.theDataString});
default:
return state;
}
}
但是,当调度 UPDATE_DATA_STRING
操作时,状态中的 theDataString
值变为双重嵌套:
{
theDataString: {theDataString: "someString"},
otherData: {... some other data... },
someListItems: [ ... a data array ... ]
}
已经遇到过同样的问题。但是,他们的解决方案是在不需要时在单个减速器上调用 combineReducers
。就我而言,我在多个减速器上调用 combineReducers
- 所以他们的回答对我不起作用。另请注意,其他数据不会出现相同的嵌套问题,只有顶级字符串会出现双重嵌套。
这里出了什么问题?
编辑:
我正在连接更新 theDataString
的组件,如下所示:
import {connect} from 'react-redux';
import {updateDataString} from './actions/actions';
import SomeList from './components/someList';
const mapStateToProps = (state) => {
return {someListItems: state.someListItems}
};
const mapDispatchToProps = (dispatch, placeHolder) => {
return {
updateDataString: (aString) => dispatch(updateDataSting(aString))
}
};
export default SomeListConnected = connect(mapStateToProps, mapDispatchToProps)(SomeList)
动作设置如下:
export const UPDATE_DATA_STRING = 'UPDATE_DATA_STRING';
export function updateDataString(aString) {
return {type: UPDATE_DATA_STRING, theDataString: aString}
}
EDIT2:改变 reducer 更新状态的方式自然是寻找答案的地方。但是我在这里尝试了各种排列但收效甚微:
Object.assign({}, ...state, {theDataString: action.theDataString});
Object.assign({}, state, {theDataString: action.theDataString});
{...state, {theDataString: action.theDataString}};
None 以上解决了问题。
试试这个
return { ...state, theDataString: action.newString};
而不是这个
return Object.assign({}, ...state, {theDataString: action.newString});
在你的减速器中。
我认为您使用 ...
展开运算符的方式有误。而且这里不需要使用Object.assign()
。
详细了解传播运算符 here
假设您使用了 combineReducers
,您的 updateDataString
reducer 应该将状态视为字符串,而不是对象:
function updateDataString(state = "", action) {
switch(action.type) {
case UPDATE_DATA_STRING: return action.newString;
default; return state;
}
}
slice reducer 只会将字符串值视为其 "state",因此您需要这样对待它。
有关该主题的更多信息,请参阅 Using combineReducers。
我有一个 redux 应用程序,除其他外,它更新单个字符串,因此状态可以反映为:
{
theDataString: "someString",
otherData: { ...some other data... },
someListItems: [ ...a data array... ]
}
因此我有以下减速器:
function updateDataString(state = {}, action) {
switch (action.type) {
case UPDATE_DATA_STRING:
return Object.assign({}, ...state, {theDataString: action.theDataString});
default:
return state;
}
}
但是,当调度 UPDATE_DATA_STRING
操作时,状态中的 theDataString
值变为双重嵌套:
{
theDataString: {theDataString: "someString"},
otherData: {... some other data... },
someListItems: [ ... a data array ... ]
}
已经遇到过同样的问题combineReducers
。就我而言,我在多个减速器上调用 combineReducers
- 所以他们的回答对我不起作用。另请注意,其他数据不会出现相同的嵌套问题,只有顶级字符串会出现双重嵌套。
这里出了什么问题?
编辑:
我正在连接更新 theDataString
的组件,如下所示:
import {connect} from 'react-redux';
import {updateDataString} from './actions/actions';
import SomeList from './components/someList';
const mapStateToProps = (state) => {
return {someListItems: state.someListItems}
};
const mapDispatchToProps = (dispatch, placeHolder) => {
return {
updateDataString: (aString) => dispatch(updateDataSting(aString))
}
};
export default SomeListConnected = connect(mapStateToProps, mapDispatchToProps)(SomeList)
动作设置如下:
export const UPDATE_DATA_STRING = 'UPDATE_DATA_STRING';
export function updateDataString(aString) {
return {type: UPDATE_DATA_STRING, theDataString: aString}
}
EDIT2:改变 reducer 更新状态的方式自然是寻找答案的地方。但是我在这里尝试了各种排列但收效甚微:
Object.assign({}, ...state, {theDataString: action.theDataString});
Object.assign({}, state, {theDataString: action.theDataString});
{...state, {theDataString: action.theDataString}};
None 以上解决了问题。
试试这个
return { ...state, theDataString: action.newString};
而不是这个
return Object.assign({}, ...state, {theDataString: action.newString});
在你的减速器中。
我认为您使用 ...
展开运算符的方式有误。而且这里不需要使用Object.assign()
。
详细了解传播运算符 here
假设您使用了 combineReducers
,您的 updateDataString
reducer 应该将状态视为字符串,而不是对象:
function updateDataString(state = "", action) {
switch(action.type) {
case UPDATE_DATA_STRING: return action.newString;
default; return state;
}
}
slice reducer 只会将字符串值视为其 "state",因此您需要这样对待它。
有关该主题的更多信息,请参阅 Using combineReducers。