使用 Redux 工具包进行 React Native > 状态已分派但未更新

Question

在同一个切片中，根据日志，状态已有效调度，但在记录选择器时，根状态不包含更新。它尝试在文本框中写入整个句子。它已被调度，但存储中不包含任何内容，正如我使用 redux DevTools 检查它时所确认的那样。

这是带有日志函数的切片：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { NOTEBOOK } from '../../../constants/strings';
import type { RootState } from '../../../store';
import type { Notebook } from '../../../types/notebook';
import { InferenceField } from '../../../types/fields';

/** General type for notebooks archived or in editor */
const emptyNotebook: Notebook = {
  id: null,
  text1: null,
  text2: null,
};

/** The slice of the store corresponding to the current data in notebook */
export const notebookSlice = createSlice({
  name: NOTEBOOK,
  initialState: emptyNotebook,
  reducers: {
    /** Merge update field(s) with the current notebook */
    mergeInNotebook: (
      state: Notebook,
      action: PayloadAction<Partial<Notebook>>
    ) => {
      state = { ...state, ...action.payload };
      console.log('DEBUG > mergeInNotebook > state = ', state);
      // Here, we see the state updated
    },
    /** replace the notebook by an empty notebook */
    clearNotebook: (state: Notebook) => {
      state = emptyNotebook;
    },
  },
});

/**  Generate the actions creators for the notebook */
export const { mergeInNotebook, clearNotebook } =
  notebookSlice.actions;

/** Selector for any field of the notebook */
export const selectNotebookInferenceFieldForDebug = (
  state: RootState,
  field: InferenceField
) => {
  console.log('DEBUG > selectNotebookFieldForDebug > state = ', state);
  // Here the state in unchanged
  return state.notebook[field] || null;
};

// Export the reducer by default
export default notebookSlice.reducer;

如果它不是来自切片，这里是商店：

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import archiveReducer from '../modules/archive/archiveSlice';
import notebookReducer from '../modules/notebook/state/notebook';
import pipelineReducer from '../modules/inference/state/pipeline';
import predictionsReducer from '../modules/inference/state/predictions';

const reducer = combineReducers({
  notebook: notebookReducer,
  archive: archiveReducer,
  pipeline: pipelineReducer,
  predictions: predictionsReducer,
});

const store = configureStore({
  reducer,
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type
export type DispatchType = typeof store.dispatch;

export default store;

以及应用程序根目录下商店的调用

export default function App() {
  const isLoadingComplete = useCachedResources();
  const theme = useTheme();

  if (!isLoadingComplete || !fontsLoaded) {
    return null;
  } else {
    return (
      <Provider store={store}>
        <PaperProvider theme={theme}>
          <SafeAreaProvider>
            <Navigation theme={theme} />
            <StatusBar />
          </SafeAreaProvider>
        </PaperProvider>
      </Provider>
    );
  }
}

Answer 1

这行就是问题所在：

state = { ...state, ...action.payload };

分配

state =

不会执行任何操作。 Immer 的工作原理是跟踪数据对象内部嵌套字段的“突变”，或新引用的“返回”。分配 state = 只是将 state 指向不同的值，既不是突变也不是返回语句。您应该使用

return {...state, ... action.payload}

或

Object.assign(state, action.payload)

来代替。

请参阅

https://redux-toolkit.js.org/usage/immer-reducers

了解更多详情。