React Native with Redux toolkit > 状态已发送但未更新

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;

以及在应用根目录调用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 通过跟踪数据对象内嵌套字段的突变或新引用的 returns 来工作。分配 state = 只是将 state 指向不同的值，既不是突变也不是 return 语句。

您应该使用 return {...state, ... action.payload} 或 Object.assign(state, action.payload)。

详情请见https://redux-toolkit.js.org/usage/immer-reducers。

React Native with Redux toolkit > 状态已发送但未更新

React Native with Redux toolkit > state dispatched but not updated

react-native

redux

react-redux

redux-toolkit

redux-store