When working with Redux and multiple reducers, you may find yourself needing a shared action to synchronize state changes across different parts of your application.

One great use case for this is resetting the global state. Instead of manually resetting each slice, you can define a Redux global action that resets everything at once:

import { createAction, createAsyncThunk } from '@reduxjs/toolkit';
import { OpsClient } from '@/clients/types';

export const resetState = createAction('app/reset');

To process this action, you need to define a listener in the slice where you want to apply the action:

const initialState: Settings = {
  persistenceType: Platform.select({ web: PersistenceType.indexedDB, default: PersistenceType.sqlite }),
};
const settingsSlice = createSlice({
  initialState,
  name: 'settings',
  reducers: {
    changePersistence: (state, action: PayloadAction<{ value: PersistenceType }>) => {
      return { ...state, persistenceType: action.payload.value };
    },
  },
  extraReducers: (builder) => {
    builder.addCase(resetState, () => initialState);
  },
});

Notice the extraReducers part - it listens to resetState and resets the reducer to its initial state.

Whenever you need to globally reset the redux state, simply dispatch it like any other Redux action with dispatch(resetState()).

I intentionally kept this solution focused and simple, without diving into Redux fundamentals. For a Redux introduction, check out my guide for redux in expo.

To see this solution in action, check out my GitHub repo.

Youtube: https://youtu.be/eftOpb3AZzI

#react-native-sqlite-expo-demo #redux #redux tutorial series