Setzen Sie den Status mit Redux-Toolkit auf den Anfangszustand zurück

Ich muss den aktuellen Zustand auf den Ausgangszustand zurücksetzen. Aber alle meine Versuche waren erfolglos. Wie kann ich das mit dem Redux-Toolkit machen?

const showOnReviewSlice = createSlice({
  name: 'showOnReview',
  initialState: {
    returned: [],
  },
  reducers: {
    reset(state) {
      //here I need to reset state of current slice
    },
  },
});

Etwas wie das:

const intialState = {
  returned: []
}

const showOnReviewSlice = createSlice({
    name: 'showOnReview',
    initialState,
    reducers: {
        reset: () => initialState
    }
});

Das hat bei mir funktioniert (Mitte/Ende 2020). Formatiert mit Ihrem Codekontext als Beispiel.

const initialState = {
  returned: [],
};

const showOnReviewSlice = createSlice({
  name: 'showOnReview',
  initialState,
  reducers: {
    reset: () => initialState,
  },
});

Bei der Verwendung mehrerer Slices können alle Slices mit in ihren Ausgangszustand zurückgesetzt werden extraReducers.

Erstellen Sie zunächst eine Aktion, die von allen Slices verwendet werden kann:

export const revertAll = createAction('REVERT_ALL')

Fügen Sie in jede Scheibe eine hinzu initialStateund ein extraReducers Reduzierstück mit dem revertAll Aktion:

const initialState = {};
export const someSlice = createSlice({
  name: 'something',
  initialState,
  extraReducers: (builder) => builder.addCase(revertAll, () => initialState),
  reducers: {}
});

Der Shop kann wie gewohnt erstellt werden:

export const store = configureStore({
  reducer: {
    someReducer: someSlice.reducer,
  }
})

Und in Ihrem Reaktionscode können Sie das aufrufen revertAll Aktion mit dem useDispatch Haken:

export function SomeComponent() {
  const dispatch = useDispatch();

  return <span onClick={() => dispatch(revertAll())}>Reset</span>
}

Ersetzen state mit initialState direkt getan nicht Arbeit für mich (Mitte 2020). Letztendlich habe ich es geschafft, jede Eigenschaft zu kopieren Object.assign(). Das hat funktioniert:

const showOnReviewSlice = createSlice({
    name: 'showOnReview',
    initialState: {
        returned: []
    },
    reducers: {
        reset(state) {
            Object.assign(state, initialState)
        }
    }
});

Wir machen es so, Leute.

Angenommen, Sie möchten beim Abmelden alle Daten löschen.

In Ihrer Datei „store.tsx“:

import { AnyAction, combineReducers, configureStore } from '@reduxjs/toolkit';
import authReducer from './slices/authSlice'
import messageReducer from './slices/messageSlice'



const appReducer = combineReducers({
  auth: authReducer,
  message: messageReducer,
});

const reducerProxy = (state: any, action: AnyAction) => {
  if(action.type === 'logout/LOGOUT') {
    return appReducer(undefined, action);
  }
  return appReducer(state, action);
}

export const store = configureStore({
  reducer: reducerProxy,
});

Dann erstellen Sie einen Thunk wie diesen:

export const logout = createAsyncThunk(
    "auth/logout",
    async function (_payload, thunkAPI) {
        thunkAPI.dispatch({ type: 'logout/LOGOUT' });
        console.log('logged out')
    }
);

Nachdem Sie den Abmelde-Thunk gesendet haben, können Sie auch den Browser aktualisieren, damit er den Benutzer automatisch zur Anmeldeseite umleitet.

function MyReactComponent() {
   const dispatch = useDispatch()

   function myLogoutOnClickHandler() {
      dispatch(logout())
      window.location = window.location;
   }
   ...

}

In meinem Fall wird, wie in der vorherigen Antwort, Mitte 2021 nur der Anfangszustand festgelegt ARBEITE NICHT, auch wenn Sie den Toolkit-Adapter wie folgt verwenden:

reducers: {
        // Other reducers
         state = tasksAdapter.getInitialState({
                status: 'idle',
                error: null,
                current: null
            })
        }
    },

stattdessen sollten Sie verwenden Object.assign()vermute, dass es mit dem internen Verhalten der Immer-Bibliothek zusammenhängt

Versuche dies. In meinem Fall wollte ich zurückkehren alle Slices auf initialState wenn eine bestimmte Aktion ausgelöst wird.

• Lassen Sie uns zunächst eine Aktion erstellen:

import { createAction } from '@reduxjs/toolkit';

export const resetPanelsAction = createAction('resetPanelsData');

• Beim Erstellen unseres Shops speichern wir eine Kopie des initialState in der Middleware:

import { Middleware } from '@reduxjs/toolkit';

export const resetDataMiddleware: Middleware =
    ({ getState }) =>
    (next) => {
        // "Caching" our initial app state
        const initialAppState = getState();

        return (action) => {
            // Let's add the condition that if the action is of 
            // type resetData, then add our cached state to its payload
            if (action.type === 'resetData') {
                const actionWithInitialAppState = {
                    ...action,
                    payload: initialAppState,
                };

                return next(actionWithInitialAppState);
            }

            return next(action);
        };
    };

• Fast fertig! Jetzt ändern wir unseren Root-Reduzierer ein wenig, indem wir einen Wrapper hinzufügen, der den Aktionstyp überprüft und zurückgibt, wenn er gleich „resetData“ ist combinedReducers mit unserer Ausgangszustanddie in der Nutzlast enthalten sein wird.

import { AnyAction } from 'redux';
import { combineReducers } from '@reduxjs/toolkit';

export const combinedReducers = combineReducers({
    /** Your reducers */
});

export const rootReducer = (
    state: ReturnType<typeof combinedReducers> | undefined,
    action: AnyAction,
) => {
    if (action.type === 'resetPanelsData') {
        return combinedReducers(action.payload, action);
    }

    return combinedReducers(state, action);
};