CODEWITHSUNDEEP
react-nativereduxreact-reduxredux-toolkit
Xiiryo
Xiiryo

Reputation: 3257

React Native with Redux toolkit > state dispatched but not updated

In the same slice, according the the logs, the state is effectively dispatched but when logging a selector, the root state is not containing the update. It tried to write entire sentences in the textbox. It is dispatched, but the store contain nothing, as confirmed when I inspect it with redux DevTools.

Here is the slice with the log functions:

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;

In case it don't come from the slice, here is the store:

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;

And the call of the store at the root of the app


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>
    );
  }
}

Upvotes: 0

Views: 609

Answers (1)

markerikson
markerikson

Reputation: 67439

This line is the issue:

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

Assigning state = does not do anything. Immer works by tracking mutations of nested fields inside of the data object, or returns of new references. Assigning state = just points state to a different value, and is neither a mutation nor a return statement.

You should use return {...state, ... action.payload} or Object.assign(state, action.payload) instead.

Please see https://redux-toolkit.js.org/usage/immer-reducers for more details.

Upvotes: 1

Related Questions