意外的 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;
   }
}

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

我通过调试器检查了带有'ARRAY_CHANGE' 类型的dispatch 调用，我没有发现任何可疑之处。看起来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)

EDIT2： 好的，我已经再次调试了代码，这是我发现的。 我有一个组合减速器。

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 对数组值的行为如此奇怪。