对我在 redux 中不可序列化的内容感到困惑（redux 错误）

Question

我的 react-native 正在工作，这个页面（屏幕）已经完成并完全正常工作，但由于某种奇怪的原因，现在它开始失败，出现 non-serializablesave_rest_second_input 错误。我正在尝试了解我的代码中不可序列化的内容

错误：

A non-serializable value was detected in the state, in the path: `intervalTimer.timer`. Value:, Timer {
// code
Take a look at the reducer(s) handling this action type: TIMER/SAVE_REST_SECONDS_INPUT.

**reducer 正在处理SAVE_REST_SECONDS_INPUT **

import { TIMER } from '../types.js';

const defaultState = {
  timer: null,
  active: true,
  updated: false,
  numberOfSets: 1,
  currentSet: 1,
  minutesInput: '',
  secondsInput: '',
  restMinutesInput: '',
  restSecondsInput: '',
  view: TIMER.INPUTS_VIEW,
  paused: false,
  rest_time: 0,
  rest_exercise: null
};

const intervalTimer = (state = defaultState, action) => {
  switch (action.type) {
// code
    case TIMER.SAVE_REST_SECONDS_INPUT: {
      return {
        ...state,
        restSecondsInput: action.payload,
      };
    }
//code
  }
};

export default intervalTimer;

它下面的另一个错误：

Error: Invariant failed: A state mutation was detected between dispatches, in the path 'intervalTimer.timer._startTime'.

在我的间隔计时器屏幕中，这是我唯一使用过的startTime

        const optionsActive = {
            startTime: parseInt(minutesInput || '0') * 60 * 1000 + parseInt(secondsInput || '1') * 1000, //how long the timer will be set to
            updateFrequency: 100,
            selfAdjust: true,
            countdown: true,
        };

        const optionsRest = {
            startTime: parseInt(restMinutesInput || '0') * 60 * 1000 + parseInt(restSecondsInput || '1') * 1000,
            updateFrequency: 100,
            selfAdjust: true,
            countdown: true,
        };

redux 商店

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  stateReconciler: autoMergeLevel2,
  blacklist: ['intervalTimer', 'creatingWorkout', 'creatingWorkoutPlan']
}

const persistedReducer = persistReducer(persistConfig, rootReducer)
export const store = configureStore({
  reducer: persistedReducer,
  enhancers: [Reactotron.createEnhancer()],
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(expoLogger),
    devTools: process.env.NODE_ENV !== 'production'
})
export const persistor = persistStore(store);

对不起，如果问题是菜鸟。我试图理解为什么这会失败，因为我认为一切都是可序列化的。

编辑：这是它打印出来的Timer 的值

A non-serializable value was detected in the state, in the path: `intervalTimer.timer`. Value:, Timer {
  "_currentTime": 0,
  "_drift": 0,
  "_eventEmitter": EventEmitter {
    "_events": Object {
      "end": [Function anonymous],
      "update": [Function anonymous],
    },
    "_eventsCount": 2,
    "_maxListeners": undefined,
  },
  "_expected": 0,
  "_isPaused": false,
  "_isRunning": false,
  "_startTime": 0,
  "_timeAtStart": 0,
  "animationFrame": false,
  "countdown": true,
  "endTime": null,
  "off": [Function removeEventListener],
  "on": [Function addEventListener],
  "selfAdjust": true,
  "startTime": 5000,
  "updateFrequency": 100,
}, 

Answer 1

第一条错误消息表示state.intervalTimer.timer 不可序列化。作为“可序列化”，我们考虑 JSON.parse(JSON.serialize(value)) 将返回原始值的所有内容，因此基本的东西，如字符串和数字，以及数组和普通对象 - 但不包括类实例。众所周知，这些值会导致中间件（如 redux-persist 和 devtools）出现问题，我们对此提出警告。

另见Redux Style Guide: Do Not Put Non-Serializable Values in State or Actions

第二条错误消息是关于在减速器之外改变你的状态的东西，即改变值state.intervalTimer.timer._startTime

这可能是由类似代码引起的

const obj = { _startTime: 0 }
dispatch(action(obj))
// the reducer would now store the object in state
// and now you change that same object - outside of the reducer, but changing a reference that is in the store
obj._startTime = 5

或通过类似代码

const obj = useSelector(state => state._startTime)
// and now you change that same object - outside of the reducer, but changing a reference that is in the store
obj._startTime = 5