React-Redux：连接到状态数组时的无限循环？答案

【问题标题】：React-Redux: Infinite loop when concat to an array in state?React-Redux：连接到状态数组时的无限循环？
【发布时间】：2016-07-06 12:00:46
【问题描述】：

所以我试图将元素添加到我存储在状态中的数组中。我知道你不应该直接改变状态，所以我发现使用concat 是最好的方法。

但是当我尝试这样做时，我得到了一个无限循环。

reducer.js：

const initialState = {
  name : null, //puzzle name
  start : []
};

export default createReducer(initialState,{
  [START_PROCESS]: (state,payload) => {
    return Object.assign({},state,{
      start : state.start.concat(['test']);
    })
  }
});

结果是['test','test','test','test'...

例如：

设置start: state.start 有效
设置start: state.start + 'test' 导致testtesttest.. 无限循环

我不知道是什么导致了这种奇怪的行为。据我所知，只有通过创建新状态才能以这种方式修改状态，因此它无法反馈给自身。

createReducer.js

export function createReducer(initialState, reducerMap) {
    return (state = initialState, action) => {
        const reducer = reducerMap[action.type];

        return reducer
            ? reducer(state, action.payload)
            : state;
    };
}

startAction.js

const START_PROCESS = 'START_PROCESS';
export function startProcess(data) {
  return {
    type : START_PROCESS,
    payload : {
      data : data //where data is a string
    }
  }
}

viewAction.js

...
export default ProcessView extends React.Component {
  render() { return <div>{this.props.actions.startProcess('string')}</div> }
}
export default connect(mapStateToProps,mapDispatchToProps)(ProcessView)

【问题讨论】：

语法看起来是正确的。你怎么称呼START_PROCESS行动？
问题已更新为完整跟踪
startAction 怎么叫？
这是一个错字，应该是startProcess 这就是说我想我看到了这个问题。有错请指正，因为startProcess是在render的body中调用的，所以每次状态变化都会调用，导致死循环？
当您从渲染方法调用此操作时，它将更新状态并重新渲染视图。像渲染 -> 调用动作 -> 减少状态 -> 渲染 -> 调用动作 -> ...这就是它无限连接的原因

标签： javascript reactjs state infinite-loop redux

【解决方案1】：

避免状态突变的最好方法肯定是使用ImmutableJS。在你的情况下，我会说你可能认为你的行为是错误的。你确定它没有在渲染内部调用吗？

【讨论】：

我会检查的。此外，该动作确实在渲染中被调用。你认为这可能导致了什么？
是的，如果你在渲染中调用它，你将进入一个无限循环。因为动作总是会调用自己，因为每个动作都会导致页面再次调用渲染。