Wie setzen Sie den Status einer Redux-Shop?

Einen Weg, das zu tun, wäre die Erstellung einer root-reducer in Ihrer Anwendung.

Root-Reduzierer normalerweise delegieren Umgang mit der Aktion auf die reducer erzeugt durch combineReducers(). Aber immer, wenn es erhält USER_LOGOUT Aktion, es gibt den Ausgangszustand wieder.

Zum Beispiel, wenn Ihre root-reducer sah so aus:

const rootReducer = combineReducers({
  /* your app’s top-level reducers */
})

Können Sie es umbenennen, um appReducer und schreiben Sie eine neue rootReducer delegieren:

const appReducer = combineReducers({
  /* your app’s top-level reducers */
})

const rootReducer = (state, action) => {
  return appReducer(state, action)
}

Nun müssen wir nur noch die lehren der neuen rootReducer zurück zu den ursprünglichen Zustand nach USER_LOGOUT Aktion. Wie wir wissen, Reduzierstücke sind zurückgeben sollte, den ursprünglichen Zustand, wenn Sie aufgerufen sind, mit undefined als das erste argument, egal, die Aktion. Lassen Sie uns diese Tatsache bedingt strip die angesammelte state wie geben wir es an appReducer:

 const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    state = undefined
  }

  return appReducer(state, action)
}

Nun, wenn USER_LOGOUT feuert, alle Reduzierstücke werden neu initialisiert. Sie können sich auch wieder etwas anders als ursprünglich, wenn Sie wollen, weil Sie überprüfen können action.type als gut.

Bekräftigen, die volle neue code sieht wie folgt aus:

const appReducer = combineReducers({
  /* your app’s top-level reducers */
})

const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    state = undefined
  }

  return appReducer(state, action)
}

Beachten Sie, dass ich nicht mutiert der Staat hier, ich bin lediglich die Neuzuweisung der Referenz einer lokalen variable namens state vor der übergabe an eine andere Funktion. Mutiert ein state-Objekt wäre ein Verstoß gegen die Redux-Prinzipien.

Falls Sie mit redux-persist, müssen Sie möglicherweise auch zu reinigen Ihre Lagerung. Redux-persist speichert eine Kopie Ihres Staates in einer storage-engine, und die staatlichen Kopie wird geladen und von dort auf aktualisieren.

Erste, Sie brauchen, um zu importieren die entsprechenden Lagerung Motor und dann, zu analysieren, den Zustand vor der Einstellung undefined und reinigen Sie die einzelnen storage state key.

const rootReducer = (state, action) => {
    if (action.type === SIGNOUT_REQUEST) {
        //for all keys defined in your persistConfig(s)
        storage.removeItem('persist:root')
        //storage.removeItem('persist:otherKey')

        state = undefined;
    }
    return appReducer(state, action);
};

InformationsquelleAutor Dan Abramov

Definieren Sie eine Aktion:

const RESET_ACTION = {
  type: "RESET"
}

Dann in jedem deiner Reduzier-vorausgesetzt, Sie verwenden switch oder if-else für das handling von mehrere Aktionen durch die einzelnen reducer. Ich werde der Fall für einen switch.

const INITIAL_STATE = {
  loggedIn: true
}

const randomReducer = (state=INITIAL_STATE, action) {
  switch(action.type) {
    case 'SOME_ACTION_TYPE':

       //do something with it

    case "RESET":

      return INITIAL_STATE; //Always return the initial state

   default: 
      return state; 
  }
}

Diese Weise, wenn Sie anrufen RESET Aktion, Sie reducer wird, aktualisieren Sie den Speicher mit default-Zustand.

Nun, die Abmeldung können Sie handhaben das wie folgt:

const logoutHandler = () => {
    store.dispatch(RESET_ACTION)
    //Also the custom logic like for the rest of the logout handler
}

Jedes mal, wenn ein userlogs, ohne einen browser refresh. Store wird immer am Standard.

store.dispatch(RESET_ACTION) nur erläutert die Idee. Sie werden wahrscheinlich haben eine Aktion creator für den Zweck. Ein viel besserer Weg sein wird, dass Sie eine LOGOUT_ACTION.

Sobald Sie Versand dieser LOGOUT_ACTION. Eine benutzerdefinierte middleware kann dann abfangen dieser Aktion, entweder mit Redux-Saga oder Redux-Thunk. Beide Möglichkeiten, Sie können jedoch den Versand einer anderen Aktion 'RESET'. Auf diese Weise speichern und Abmelden reset passieren wird, synchron-und Ihr Geschäft wird bereit für einen anderen Benutzer anmelden.

InformationsquelleAutor nirbhaygp

Mit Redux, wenn auf die folgende Lösung, die meint ich habe ein initialState in alle meine Reduzierstücke (z.B. { user: { name, E-Mail }}). In vielen Komponenten überprüfe ich auf diese verschachtelte Eigenschaften, so dass mit diesem Update ich verhindern, dass mein rendert Methoden sind gebrochen, gepaart Eigenschaft Bedingungen (z.B. wenn die Staatliche.Benutzer.E-Mail, die einen Fehler auslösen, Benutzer nicht definiert ist, wenn die oben genannten Lösungen).

const appReducer = combineReducers({
  tabs,
  user
})

const initialState = appReducer({}, {})

const rootReducer = (state, action) => {
  if (action.type === 'LOG_OUT') {
    state = initialState
  }

  return appReducer(state, action)
}

InformationsquelleAutor Rob Moorman

Kombination der Ansätze von Dan, Ryan und Rob, berücksichtigen, halten die router Staat und initialisieren alles andere in den Zustand Baum, landete ich mit diesem:

const rootReducer = (state, action) => appReducer(action.type === LOGOUT ? {
    ...appReducer({}, {}),
    router: state && state.router || {}
  } : state, action);

InformationsquelleAutor Andy_D

Ich habe eine Komponente zu geben, wieder einmal die Möglichkeit den Status zurückzusetzen, müssen Sie nur diese Komponente zu verwenden, um verbessern Sie Ihren Shop und Versand einer bestimmten Aktion.geben Sie auf reset auslösen. Der Gedanke der Umsetzung ist die gleiche wie das, was @Dan sagte Abramov.

Github: https://github.com/wwayne/redux-reset

InformationsquelleAutor wwayne

Akzeptierte Antwort half mir lösen meine Fall. Jedoch, ich traf Fall, in dem nicht-die-ganze-Zustand geräumt werden mussten. So habe ich es auf diese Weise:

const combinedReducer = combineReducers({
    //my reducers 
});

const rootReducer = (state, action) => {
    if (action.type === RESET_REDUX_STATE) {
        //clear everything but keep the stuff we want to be preserved ..
        delete state.something;
        delete state.anotherThing;
    }
    return combinedReducer(state, action);
}

export default rootReducer;

Hoffe, dies hilft jemand anderes 🙂

InformationsquelleAutor pesho hristov

Wenn Sie redux-Aktionen, hier ist eine schnelle Abhilfe mit einem HOF(Höherer Ordnung Funktion) für handleActions.

import { handleActions } from 'redux-actions';

export function handleActionsEx(reducer, initialState) {
  const enhancedReducer = {
    ...reducer,
    RESET: () => initialState
  };
  return handleActions(enhancedReducer, initialState);
}

Und verwenden Sie dann handleActionsEx statt der ursprünglichen handleActions zu handhaben getrieben.

Dan ' s Antwort gibt eine gute Idee über dieses problem, aber es hat nicht funktioniert gut für mich, denn ich bin mit redux-persist.

Wenn Sie mit redux-persist einfach vorbei undefined Zustand nicht auslösen anhaltende Verhalten, so dass ich wusste, ich musste manuell entfernen Element aus dem Speicher (Reagieren Nativen in meinem Fall, also AsyncStorage).

await AsyncStorage.removeItem('persist:root');

oder

await persistor.flush(); //or await persistor.purge();

funktionierte nicht für mich entweder, Sie nur mich angebrüllt. (z.B. beklagen, wie "Unerwartete Schlüssel _persist ...")

Dann habe ich plötzlich nachgedacht, alles was ich will ist einfach, machen jedes einzelne reducer Rückkehr Ihrer eigenen ursprünglichen Zustand, wenn RESET action-Typ aufgetreten ist. So, anhaltende behandelt wird, natürlich. Offensichtlich ohne über utility-Funktion (handleActionsEx), mein code wird nicht TROCKEN (obwohl es nur ein Einzeiler, also RESET: () => initialState), aber ich konnte es nicht ertragen 'cuz ich Liebe metaprogramming.

InformationsquelleAutor elquimista

Eine schnelle und einfache option, die für mich gearbeitet wurde mit redux-reset . Das war einfach und hat auch einige erweiterte Optionen, die für größere Anwendungen.

Setup erstellen, speichern

import reduxReset from 'redux-reset'
...
const enHanceCreateStore = compose(
applyMiddleware(...),
reduxReset()  //Will use 'RESET' as default action.type to trigger reset
)(createStore)
const store = enHanceCreateStore(reducers)

Versand, Ihrem "reset" in Ihrem logout-Funktion

store.dispatch({
type: 'RESET'
})

Hoffe, das hilft

InformationsquelleAutor Munei Nengwenani

warum verwenden Sie nicht nur return module.exports.default() 😉

export default (state = {pending: false, error: null}, action = {}) => {
    switch (action.type) {
        case "RESET_POST":
            return module.exports.default();
        case "SEND_POST_PENDING":
            return {...state, pending: true, error: null};
        //....
    }
    return state;
}

Hinweis: stellen Sie sicher, dass Sie die Aktion default-Wert {} und Sie sind ok, weil Sie nicht wollen, um Fehler beim überprüfen action.type innerhalb der switch-Anweisung.

InformationsquelleAutor Fareed Alnamrouti

Fand ich, dass die akzeptierte Antwort, die gut für mich gearbeitet, aber es war der Auslöser für die ESLint no-param-reassign Fehler - https://eslint.org/docs/rules/no-param-reassign

Hier ist, wie ich behandelt Sie stattdessen, indem Sie eine Kopie erstellen, der Staat (das heißt in meinem Verständnis, die Reduxy was zu tun...):

import { combineReducers } from "redux"
import { routerReducer } from "react-router-redux"
import ws from "reducers/ws"
import session from "reducers/session"
import app from "reducers/app"

const appReducer = combineReducers({
    "routing": routerReducer,
    ws,
    session,
    app
})

export default (state, action) => {
    const stateCopy = action.type === "LOGOUT" ? undefined : { ...state }
    return appReducer(stateCopy, action)
}

Aber vielleicht eine Kopie in den Zustand zu übergeben Sie es in einem anderen reducer-Funktion erstellt eine Kopie, die ein wenig über-kompliziert? Diese Lesen nicht so schön, aber ist mehr auf den Punkt:

export default (state, action) => {
    return appReducer(action.type === "LOGOUT" ? undefined : state, action)
}

InformationsquelleAutor skwidbreth

Neben Dan Abramov Antwort, sollten wir nicht explizit festlegen, Aktion, action = {type: '@@INIT'} neben Staat = undefined. Mit den oben genannten Maßnahmen geben, die jeder reducer gibt den ursprünglichen Zustand.

InformationsquelleAutor rupav jain

Folgende Lösung funktioniert bei mir.

Zuerst auf initiation unserer Anwendung die Druckminderer Staat ist frische und neue mit Standard - InitialState.

Haben wir eine Aktion hinzufügen, dass Anrufe auf die APP inital load, um weiterhin default-Zustand.

Beim Abmelden von der Anwendung können wir einfach zuweisen die default-Zustand und reducer funktioniert genau wie neue.

Wichtigsten APP-Container

  componentDidMount() {   
    this.props.persistReducerState();
  }

Haupt-APP Reducer

const appReducer = combineReducers({
  user: userStatusReducer,     
  analysis: analysisReducer,
  incentives: incentivesReducer
});

let defaultState = null;
export default (state, action) => {
  switch (action.type) {
    case appActions.ON_APP_LOAD:
      defaultState = defaultState || state;
      break;
    case userLoginActions.USER_LOGOUT:
      state = defaultState;
      return state;
    default:
      break;
  }
  return appReducer(state, action);
};

Auf Logout Aufruf-Aktion für den Status zurückzusetzen

function* logoutUser(action) {
  try {
    const response = yield call(UserLoginService.logout);
    yield put(LoginActions.logoutSuccess());
  } catch (error) {
    toast.error(error.message, {
      position: toast.POSITION.TOP_RIGHT
    });
  }
}

Hoffe, das löst Ihr problem!

InformationsquelleAutor Mukundhan

Mein nehmen zu halten Redux aus der Bezugnahme auf die gleiche variable der Ausgangszustand:

//write the default state as a function
const defaultOptionsState = () => ({
  option1: '',
  option2: 42,
});

const initialState = {
  options: defaultOptionsState() //invoke it in your initial state
};

export default (state = initialState, action) => {

  switch (action.type) {

    case RESET_OPTIONS:
    return {
      ...state,
      options: defaultOptionsState() //invoke the default function to reset this part of the state
    };

    default:
    return state;
  }
};

InformationsquelleAutor Hani

Einfach Abmelden-link deaktivieren Sitzung und aktualisieren Sie die Seite. Kein zusätzlicher code benötigt für Ihr Geschäft. Jedes mal, wenn Sie wollen, vollständig zurücksetzen des Status eine Aktualisierung der Seite ist eine einfache und leicht wiederholbare Art und Weise, es zu handhaben.

InformationsquelleAutor user3500325