React-Redux:当连接到处于状态的数组时无限循环

React-Redux: Infinite loop when concat to an array in state?

本文关键字:状态 数组 无限循环 连接 于状态 React-Redux      更新时间:2023-09-26

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

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

减速机.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..的无限循环

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

创建减速器.js

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

启动操作.js

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

视图操作.js

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

避免状态突变的最好方法肯定是使用ImmutableJS。在你的情况下,我会说也许你说你的行为是错误的。你确定它没有在渲染中调用吗?