意外的 redux 状态刷新

Question

我有一个 reducer 和一个初始的 redux 状态。

const initialState = {
   arrayValue: ['1', '2']
};

export const reducer(state = initialState, action) {
   switch (action.type) {
      case 'ARRAY_CHANGE': {
      return {
           ...state,
           arrayValue: [...action.payload]
         }
      }
      default:
         return state;
   }
}

减速器按预期工作。奇怪的是，当我转到另一页然后 return 到上一页时，arrayValue 变为空。我还有很多其他减速器，它们工作得很好。

我通过调试器检查了 dispatch 类型的 'ARRAY_CHANGE' 调用，但没有发现任何可疑之处。看起来 arrayValue 无缘无故变空了。有人有什么想法吗？

编辑： 我通过 Redux 开发工具检查了状态。当我转到另一个页面时，arrayValues 变成一个空数组，尽管没有 'ARRAY_CHANGE' 类型的 dispatch 调用。也许 react-router 有一些问题。

这就是将值传递给组件的方式。

export default connect(
  state => (
    {arrayValue: state.app.reducer.arrayValue}
  ),
  dispatch => ({
    onChangeArrayValues: arrayValue => 
        dispatch({type: 'ARRAY_CHANGE', payload: arrayValue})
  })
)(MyComponent)

编辑2： 好的，我又调试了一遍代码，这就是我的发现。我有一个组合减速器。

const appReducers = combineReducer({
  ui: uiReducer,
  reducer
});


...
const initialState = {
   spinner: false,
}

function uiReducer(state = initialState, action) {
   switch(action.type) {
      case SPINNER_SHOW: {
         return {...state, spinner: true};
      }
      case SPINNER_HIDE: {
         return {...state, spinner: false};
      }
      default:
         return state;
   }
}

这两个减速器是分开的。但这是 SPINNER_SHOW 事件中发生的事情。对象结构与我描述的略有不同。不关注这个

selectedNodeVerifications 更改 ARRAY_VALUE。

SPINNER_SHOW 事件

这两个事件放在不同的reducer 中。我不知道 SPINNER_SHOW 会如何影响 selectedNodeVerifications。

Answer 1

我找到了某种解决方案。

const initialState = {
   arrayValue: ['1', '2'].join(',')
};

export const reducer(state = initialState, action) {
   switch (action.type) {
      case 'ARRAY_CHANGE': {
      return {
           ...state,
           arrayValue: action.payload.join(',')
         }
      }
      default:
         return state;
   }
}

...

export default connect(
  state => (
    {arrayValue: state.app.reducer.arrayValue.split(',')}
  ),
  dispatch => ({
    onChangeArrayValues: arrayValue => 
        dispatch({type: 'ARRAY_CHANGE', payload: arrayValue})
  })
)(MyComponent)

这是一种肮脏的方法，但它确实有效。我仍然不明白为什么 Redux 对数组值的行为如此奇怪。

意外的 redux 状态刷新

Unexpected redux state flushing

reactjs

redux

state

reducers

state-management