Dva: Wie lösche ich Redux-Informationen?

Ich dachte an eine Möglichkeit, eine öffentliche Methode zu schreiben, die Registrierung des Modells app.unmodel(namespace) aufzuheben und dann app.model(model) wieder zu registrieren

Schreiben Sie einen speziellen Reduzierer, um zu löschen?

@xufei飞姐, dva schon lange nicht mehr aktualisiert wurde, hast du

Im realen Geschäft haben viele Modelle einen Anfangszustand, und das einfache Leeren der Datenobjekte im Zustand ist anfällig für Probleme.
Unser Ansatz besteht darin, beim Erstellen eines Modells den Anfangszustand des Modells zu klonen und dann jedem Modell standardmäßig einen resetState-Reduzierer hinzuzufügen (bei der Reset-Methode werden die geklonten Anfangsdaten auf den Zustand aktualisiert). aufgeräumt, senden Sie einfach die entsprechende Aktion (xxx/resetState ).
Aber auch wenn es sich um einen globalen Reset handelt, ist es dennoch recht schmerzhaft, für jedes Modell kann nur eine Aktion gesendet werden, diese Forderung ist jedoch noch nicht erfüllt.

Es fühlt sich an, als ob dies nicht passieren sollte. Die Initialisierungsinformationen des ersten Campus sollten auch eine Aktion haben, oder sollte diese Aktion nicht beim Wechsel zwischen Campus aufgerufen werden? Selbst wenn Sie den gesamten Status zurücksetzen, sollte er nicht automatisch nach der Aktion beim Campuswechsel initialisiert werden?

@laketea @zjxpcyc @xufei Zusammen mit Ihren Meinungen denke ich, dass es immer noch notwendig ist, Aktionen direkt zu verwenden, um die Daten zu initialisieren.

Jedes Modell fügt eine Reload-Methode hinzu, und nach dem Umschalten wird jedes gelöscht.

@dickelwm weiß nicht, ob das Unmodel Folgen haben wird. Ich verweise also noch auf deren Vorgehensweise und lasse bei jedem Modellneuladen direkt die Daten zurücksetzen.

Danke euch allen.

Kurzfristig verwende ich jedoch immer noch Brute Force, um die Seite direkt neu zu laden. Fügen Sie es wieder hinzu, wenn Sie einen besseren Weg finden.

Wenn der gesamte Zustand zurückgesetzt wird, ist die Methode von @xufei die einfachste:

// const initialState = ...;
const app = dva({
  onReducer: reducer => {
    return (state, action) => {
      if (action.type === 'RESET') {
        return initialState;
      }
      return state;
    };
  }
});
// Usage
dispatch({ type: 'RESET' });

Ich habe es im Internet gesucht und dem Code von @xufei老大 lange Zeit gefolgt, aber ich konnte es nicht ausführen. Es hat lange gedauert, die Situation herauszufinden.Wenn Sie onReducer verwenden, müssen Sie neben der Rückgabe des neuen Zustands auch ein Routing zurückgeben.Siehe den Code von dva/test/reducers-test.js

Mein Projekt basiert auf antd-pro und muss zwei Dateien app.js und initialState.js im Verzeichnis src hinzufügen.

Definieren Sie zunächst den Anfangszustand in der Datei ./src/initialState.js .

import defaultSettings from './defaultSettings';

export default {
  setting: defaultSettings,
  loading: {
    effects: {},
  },
  global: {
    layout: 'basic', // Page layout switch (options: basic | map)
    collapsed: false,
    notices: [],
  },
  login: {
    status: false,
    authority: 'guest',
  },
  register: {
    status: false,
  },
}

Beurteilen Sie dann im onReducer Hook in der ./src/app.js Datei und setzen Sie den Zustandsbaum zurück, wenn action.type RESET .

import initialState from './initialState';

// eslint-disable-next-line
export const dva = {
  config: {
    initialState,
    onReducer(reducer) {
      return (state, action) => {
        const newState = action.type === 'RESET' ? initialState : reducer(state, action);
        return { ...newState, routing: newState.routing };
      };
    },
  },
};

Definiert auf diese Weise, können Sie es direkt dort , wo Sie es brauchen (wie Logout), wie Modifizierung der Abmeldevorgang des antd-pro Top-Menü ./src/layouts/Header.js :

class HeaderView extends PureComponent {
  ...

   handleMenuClick = ({ key }) => {
    ...

    if (key === 'logout') {
      dispatch({ type: 'RESET' });
      dispatch({ type: 'login/logout' });
    }
  };

  ...
}

Ist es möglich, den Ausgangszustand zu Beginn der Anwendung als Reset-Daten zu speichern?

@laozhu

Hallo, ich habe das befolgt, was Sie geschrieben haben, und zur Laufzeit wurde ein Fehler gemeldet: Nicht abgefangen (in Versprechen) Router-Reduzierer konnte im Zustandsbaum nicht gefunden werden, er muss unter "Router" gemountet werden

Das heißt, Routing befindet sich nicht im initialState-Objekt.Wo sollte dies definiert werden?

@shangdev @laozhu dva Dies erschien nach dem Upgrade index.js:1 uncaught at _callee Could not find router reducer in state tree, it must be mounted under "router"
Der Code ist der gleiche

Ich habe es im Internet gesucht und dem Code von @xufei老大 lange Zeit gefolgt, aber ich konnte es nicht ausführen. Es hat lange gedauert, die Situation herauszufinden.Wenn Sie onReducer verwenden, müssen Sie neben der Rückgabe des neuen Zustands auch ein Routing zurückgeben.Siehe den Code von dva/test/reducers-test.js

Mein Projekt basiert auf antd-pro und muss zwei Dateien app.js und initialState.js im Verzeichnis src hinzufügen.

Definieren Sie zunächst den Anfangszustand in der Datei ./src/initialState.js .

import defaultSettings from './defaultSettings';

export default {
  setting: defaultSettings,
  loading: {
    effects: {},
  },
  global: {
    layout: 'basic', // Page layout switch (options: basic | map)
    collapsed: false,
    notices: [],
  },
  login: {
    status: false,
    authority: 'guest',
  },
  register: {
    status: false,
  },
}

Beurteilen Sie dann im onReducer Hook in der ./src/app.js Datei und setzen Sie den Zustandsbaum zurück, wenn action.type RESET .

import initialState from './initialState';

// eslint-disable-next-line
export const dva = {
  config: {
    initialState,
    onReducer(reducer) {
      return (state, action) => {
        const newState = action.type === 'RESET' ? initialState : reducer(state, action);
        return { ...newState, routing: newState.routing };
      };
    },
  },
};

Definiert auf diese Weise, können Sie es direkt dort , wo Sie es brauchen (wie Logout), wie Modifizierung der Abmeldevorgang des antd-pro Top-Menü ./src/layouts/Header.js :

class HeaderView extends PureComponent {
  ...

   handleMenuClick = ({ key }) => {
    ...

    if (key === 'logout') {
      dispatch({ type: 'RESET' });
      dispatch({ type: 'login/logout' });
    }
  };

  ...
}

Hast du dafür einen vollständigen Code? Nach dem Definieren von dva in app.js, wo wird es aufgerufen oder gestartet?

@laozhu kann die Definition von initialState entfernen, wenn action.type RESET , verwenden Sie direkt die initialisierten Daten reducer({},{type:'@<strong i="9">@INIT</strong>'})

export const dva = {
  config: {
    onReducer(reducer) {
      return (state, action) => {
        const newState = action.type === 'RESET' ? reducer({},{type:'@<strong i="12">@INIT</strong>'}) : reducer(state, action);
        return { ...newState, routing: newState.routing };
      };
    },
  },
};

Wenn alle Modelle zurückgesetzt werden müssen

class HeaderView extends PureComponent {
  ...

   handleMenuClick = ({ key }) => {
    ...

    if (key === 'logout') {
      dispatch({ type: 'RESET' });
      dispatch({ type: 'login/logout' });
    }
  };

  ...
}

• Wenn Sie den Zustand unter einem bestimmten Namensraum zurücksetzen möchten, senden Sie einfach den Reduzierer, der diesem Zustand entspricht.

• Wenn Sie alle Zustände unter einem Namensraum zurücksetzen möchten

 onReducer(reducer) {
    let initialState: any = null;
    return (state: any, action: any) => {
      let newState: any = reducer(state, action);
      if (action.type === "@@INIT") {
        initialState = newState; //缓存所有初始state
      }

      const actionTypeArr: string[] = action.type.split("/");

      if (actionTypeArr.length === 1 && action.type === "reset") {
        newState = initialState;
      }

      if (actionTypeArr.length > 1) {
        const namespace = actionTypeArr[0];
        const postfix = actionTypeArr[actionTypeArr.length - 1];
        const modelState = initialState[namespace];
        if (postfix === "reset" && modelState) {
          newState = {
            ...newState,
            [namespace]: modelState
          }; //重置某个namespace的state,直接dispacth({type:"{namespace}/reset"})
        }
      }

      return newState;
    };
  }

• Wenn Sie den Zustand unter einem bestimmten Namensraum zurücksetzen möchten, senden Sie einfach den Reduzierer, der diesem Zustand entspricht.
• Wenn Sie alle Zustände unter einem Namensraum zurücksetzen möchten

 onReducer(reducer) {
    let initialState: any = null;
    return (state: any, action: any) => {
      let newState: any = reducer(state, action);
      if (action.type === "@@INIT") {
        initialState = newState; //缓存所有初始state
      }

      const actionTypeArr: string[] = action.type.split("/");

      if (actionTypeArr.length === 1 && action.type === "reset") {
        newState = initialState;
      }

      if (actionTypeArr.length > 1) {
        const namespace = actionTypeArr[0];
        const postfix = actionTypeArr[actionTypeArr.length - 1];
        const modelState = initialState[namespace];
        if (postfix === "reset" && modelState) {
          newState = {
            ...newState,
            [namespace]: modelState
          }; //重置某个namespace的state,直接dispacth({type:"{namespace}/reset"})
        }
      }

      return newState;
    };
  }

action.type === "@@INIT" Ich habe zu action.type.indexOf('@@redux/INIT') geändert === 0

dva-reset-state ist ein Plug-in, nehmen Sie es einfach und verwenden Sie es, Sie können darauf verweisen