Dva: Bagaimana cara menghapus informasi redux?

Dibuat pada 11 Mei 2017  ·  16Komentar  ·  Sumber: dvajs/dva

misalnya redux-reset

Bagaimana cara menghapus informasi redux?


adegan yang akan digunakan:

Satu orang mengelola beberapa kampus, dan informasi masing-masing kampus tidak dikomunikasikan Saat berpindah kampus, untuk menghindari masalah yang disebabkan oleh data lama, location.reload() harus digunakan untuk memaksa penyegaran halaman untuk memperbarui semua informasi memori.
Ingin menghapus data redux tanpa menyegarkan halaman?

Komentar yang paling membantu

dva-reset-state adalah plug-in, ambil saja dan gunakan, Anda dapat merujuknya

Semua 16 komentar

Saya memikirkan cara untuk menulis metode publik, membatalkan pendaftaran model, app.unmodel(namespace) , dan kemudian mendaftar kembali app.model(model)

Tulis peredam khusus untuk dihapus?

@xufei飞姐, dva lama tidak diperbarui, apakah Anda

Dalam bisnis yang sebenarnya, banyak model memiliki status awal, dan hanya mengosongkan objek data dalam status rentan terhadap masalah.
Pendekatan kami adalah mengkloning status awal model saat membuat model, dan kemudian menambahkan peredam resetState ke setiap model secara default (dalam metode reset, data awal kloning akan diperbarui ke status). dibersihkan, Kirim saja tindakan yang sesuai (xxx/resetState ).
Tapi kalau reset global masih lumayan sakit, hanya satu action yang bisa dikirim untuk setiap model, tapi demand ini belum terpenuhi.

Rasanya ini tidak seharusnya terjadi. Informasi inisialisasi kampus pertama juga harus ada actionnya kan?Bukankah seharusnya action ini dipanggil saat berpindah-pindah kampus? Bahkan jika Anda mengatur ulang semua status, bukankah seharusnya ini diinisialisasi secara otomatis setelah tindakan saat berpindah kampus?

@laketea @zjxpcyc @xufei Dikombinasikan dengan pendapat Anda, saya pikir masih perlu untuk langsung menggunakan tindakan untuk menginisialisasi data.

Setiap model menambahkan metode reload, dan setelah beralih, masing-masing dihapus.

@dicklwm tidak tahu apakah unmodel akan memiliki gejala sisa. Jadi saya masih mengacu pada pendekatan mereka dan langsung membiarkan setiap model memuat ulang mengatur ulang data.

Terima kasih semua.


Namun, dalam jangka pendek, saya masih menggunakan brute force untuk memuat ulang halaman secara langsung. Tambahkan kembali ketika Anda menemukan cara yang lebih baik.

Jika itu mengatur ulang seluruh status, metode @xufei adalah yang paling sederhana:

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

Saya mencarinya dari Internet dan mengikuti kode @xufei老大 untuk waktu yang lama , tetapi saya tidak dapat menjalankannya. Butuh waktu lama untuk mengetahui situasinya. Saat menggunakan onReducer, selain mengembalikan status baru, Anda juga perlu mengembalikan perutean.Lihat kode dva/test/reducers-test.js

Proyek saya didasarkan pada antd-pro dan perlu menambahkan dua file app.js dan initialState.js bawah direktori src .

Pertama, tentukan status awal dalam file ./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,
  },
}

Kemudian, nilai di onReducer hook di file ./src/app.js , dan reset pohon status ketika action.type adalah 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 };
      };
    },
  },
};

Didefinisikan dengan cara ini, Anda dapat menggunakannya secara langsung di mana Anda membutuhkannya (seperti logout), seperti memodifikasi operasi logout dari menu atas antd-pro ./src/layouts/Header.js :

class HeaderView extends PureComponent {
  ...

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

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

  ...
}

Apakah layak untuk menyimpan status awal di awal aplikasi sebagai data reset?

@laozhu

Halo, saya mengikuti apa yang Anda tulis, dan kesalahan dilaporkan saat runtime: Tidak tertangkap (dalam janji) Tidak dapat menemukan peredam router di pohon negara, itu harus dipasang di bawah "router"

Artinya, perutean tidak ada dalam objek initialState. Di mana ini harus didefinisikan?

@shangdev @laozhu dva Ini muncul setelah upgrade index.js:1 uncaught at _callee Could not find router reducer in state tree, it must be mounted under "router"
Kodenya sama

Saya mencarinya dari Internet dan mengikuti kode @xufei老大 untuk waktu yang lama , tetapi saya tidak dapat menjalankannya. Butuh waktu lama untuk mengetahui situasinya. Saat menggunakan onReducer, selain mengembalikan status baru, Anda juga perlu mengembalikan perutean.Lihat kode dva/test/reducers-test.js

Proyek saya didasarkan pada antd-pro dan perlu menambahkan dua file app.js dan initialState.js bawah direktori src .

Pertama, tentukan status awal dalam file ./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,
  },
}

Kemudian, nilai di onReducer hook di file ./src/app.js , dan reset pohon status ketika action.type adalah 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 };
      };
    },
  },
};

Didefinisikan dengan cara ini, Anda dapat menggunakannya secara langsung di mana Anda membutuhkannya (seperti logout), seperti memodifikasi operasi logout dari menu atas antd-pro ./src/layouts/Header.js :

class HeaderView extends PureComponent {
  ...

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

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

  ...
}

Apakah Anda memiliki kode lengkap untuk ini? Setelah mendefinisikan dva di app.js, di mana itu dipanggil atau dimulai?

@laozhu dapat menghapus definisi initialState , ketika action.type adalah RESET , langsung gunakan data yang diinisialisasi 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 };
      };
    },
  },
};

Ketika semua model perlu diatur ulang

class HeaderView extends PureComponent {
  ...

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

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

  ...
}
  • Jika Anda ingin mengatur ulang status di bawah namespace tertentu, kirimkan saja peredam yang sesuai dengan status itu.

  • Jika Anda ingin mengatur ulang semua status di bawah 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;
    };
  }
  • Jika Anda ingin mengatur ulang status di bawah namespace tertentu, kirimkan saja peredam yang sesuai dengan status itu.
  • Jika Anda ingin mengatur ulang semua status di bawah 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" Saya mengubah ke action.type.indexOf('@@redux/INIT') === 0

dva-reset-state adalah plug-in, ambil saja dan gunakan, Anda dapat merujuknya

Apakah halaman ini membantu?
0 / 5 - 0 peringkat