Redux 使用双重嵌套创建状态答案

【问题标题】：Redux creates state with double nestingRedux 使用双重嵌套创建状态
【发布时间】：2017-05-26 19:22:04
【问题描述】：

我有一个 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;
  }
}

但是，当 dispatch UPDATE_DATA_STRING action 时，状态中的theDataString 值变成了双重嵌套：

{
  theDataString: {theDataString: "someString"},
  otherData: {... some other data... },
  someListItems: [ ... a data array ... ]
}

here 已经遇到过同样的问题。但是，他们的解决方案是，在没有必要的情况下，他们在单个 reducer 上调用 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}};

以上方法都不能解决问题。

【问题讨论】：

你是如何将你的组件连接到 Redux 的？
顺便说一句，您的操作没有 newString 作为有效负载。就像return {type: UPDATE_DATA_STRING, theDataString: aString}。
@JyothiBabuAraja，谢谢，已修复。（原代码不包含这个错误）

标签： redux state

【解决方案1】：

假设您使用过combineReducers，您的updateDataString reducer 应该将状态视为字符串，而不是对象：

function updateDataString(state = "", action) {
    switch(action.type) {
        case UPDATE_DATA_STRING: return action.newString;
        default; return state;
    }
}

切片缩减器只会将字符串值视为其“状态”，因此您需要这样对待它。

有关该主题的更多信息，请参阅Using combineReducers。

【讨论】：

【解决方案2】：

试试这个

return { ...state, theDataString: action.newString};

而不是这个

return Object.assign({}, ...state, {theDataString: action.newString});

在你的减速器中。

我认为您以错误的方式使用 ... 扩展运算符。而且这里不需要使用Object.assign()。

阅读更多关于扩展运算符here

【讨论】：

感谢您的提醒。不幸的是，建议的更换并没有解决问题。
是的。状态仍然以theDataString 双嵌套出现。
在您更新的问题中尝试了 3 次。第三次尝试与我的回答不同。一旦重新检查。