Dva: Como limpar informações de redux?

Pensei em uma maneira de escrever um método público, cancelar o registro do modelo, app.unmodel(namespace) , e depois registrar novamente app.model(model)

Escreva um redutor especial para limpar?

@xufei飞 姐, dva não é atualizado há muito tempo, você está

Em negócios reais, muitos modelos têm um estado inicial e simplesmente esvaziar os objetos de dados nesse estado está sujeito a problemas.
Nossa abordagem é clonar o estado inicial do modelo ao criar um modelo e, em seguida, adicionar um redutor resetState a cada modelo por padrão (no método de redefinição, os dados iniciais clonados serão atualizados para o estado). limpo, basta enviar a ação correspondente (xxx / resetState).
Mas se for um reset global, ainda é bastante doloroso, apenas uma ação pode ser enviada para cada modelo, mas essa demanda ainda não foi atendida.

Parece que isso não deveria acontecer. As informações de inicialização do primeiro campus também devem ter uma ação, certo? Essa ação não deveria ser chamada ao alternar entre os campi? Mesmo se você redefinir todo o estado, ele não deveria ser inicializado automaticamente após a ação ao trocar de campus?

@laketea @zjxpcyc @xufei Combinado com suas opiniões, acho que ainda é necessário usar a ação diretamente para inicializar os dados.

Cada modelo adiciona um método de recarga e, após a troca, cada um é apagado.

@dicklwm não sabe se o não modelo terá sequelas. Portanto, ainda me refiro à abordagem deles e deixo que cada modelo recarregue e reinicie os dados.

obrigado a todos.

No entanto, a curto prazo, ainda uso a força bruta para recarregar a página diretamente. Adicione-o de volta quando encontrar uma maneira melhor.

Se ele redefinir todo o estado, o método de @xufei é o mais simples:

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

Pesquisei na Internet e segui o código dva / test / reducers-test.js

Meu projeto é baseado no antd-pro e precisa adicionar dois arquivos app.js e initialState.js no diretório src .

Primeiro, defina o estado inicial no arquivo ./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,
  },
}

Então, juiz no onReducer gancho no ./src/app.js arquivo, e redefinir a árvore do estado quando 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 };
      };
    },
  },
};

Definido desta forma, você pode usá-lo diretamente onde for necessário (como logout), como modificar a operação de logout do menu superior do antd-pro ./src/layouts/Header.js :

class HeaderView extends PureComponent {
  ...

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

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

  ...
}

É possível salvar o estado inicial no início do aplicativo como dados de redefinição?

@laozhu

Olá, segui o que você escreveu e um erro foi relatado em tempo de execução: Uncaught (prometendo) Não foi possível encontrar o redutor do roteador na árvore de estado, ele deve ser montado em "roteador"

Ou seja, o roteamento não está no objeto initialState. Onde isso deve ser definido?

@shangdev @laozhu dva Este apareceu após a atualizar index.js:1 uncaught at _callee Could not find router reducer in state tree, it must be mounted under "router"
O código é o mesmo

Pesquisei na Internet e segui o código dva / test / reducers-test.js

Meu projeto é baseado no antd-pro e precisa adicionar dois arquivos app.js e initialState.js no diretório src .

Primeiro, defina o estado inicial no arquivo ./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,
  },
}

Então, juiz no onReducer gancho no ./src/app.js arquivo, e redefinir a árvore do estado quando 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 };
      };
    },
  },
};

Definido desta forma, você pode usá-lo diretamente onde for necessário (como logout), como modificar a operação de logout do menu superior do antd-pro ./src/layouts/Header.js :

class HeaderView extends PureComponent {
  ...

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

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

  ...
}

Você tem um código completo para isso? Depois de definir dva em app.js, onde ele é chamado ou iniciado?

@laozhu pode remover a definição de initialState , quando action.type é RESET , use diretamente os dados inicializados 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 };
      };
    },
  },
};

Quando todos os modelos precisam ser redefinidos

class HeaderView extends PureComponent {
  ...

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

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

  ...
}

• Se você deseja redefinir o estado em um determinado namespace, basta despachar o redutor correspondente a esse estado.

• Se você deseja redefinir todos os estados em um namespace

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

• Se você deseja redefinir o estado em um determinado namespace, basta despachar o redutor correspondente a esse estado.
• Se você deseja redefinir todos os estados em um namespace

 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" Eu mudei para action.type.indexOf ('@@ redux / INIT') === 0

dva-reset-state é um plug-in, basta pegá-lo e usá-lo, você pode consultá-lo