rdux加持久化存储

安装rdux和redux-persist

npm i rdux npm i readux-persist

取值时

1.引入仓库

import { store } from '@/store'

const store=store.getSate()

修改时

 store.dispatch({

          type: IUserActionType.CHANGE,

          payload: { token: res.data.token }

        })

模块化存储rdux

创建store文件

里面创建index.tsx

import { createStore } from "redux";

import han from './reducers';

//配置数据的持久化效果

import { persistReducer, persistStore } from "redux-persist";

//导入需要配置的数据源，可以选择，storage，cookie,session等

import storage from "redux-persist/lib/storage";

// let store=createStore(han)

//定义配置的信息

const persitConfig = {

    key:"root",

    storage:storage,

   // 如果不想将部分state持久化，可以将其放入黑名单(blacklist)中.黑名单是设置

//   blacklist: ['ll']

}

//创建持久化的配置persist的信息

const persist_reducers = persistReducer(persitConfig,han);

//创建存储对象并且抛出对象

const store = createStore(persist_reducers);

const persistor =  persistStore(store);

export { store, persistor };

//创建文件 reducers 并创建index.tsx

import { combineReducers } from "redux";

import user from "./user";

export default combineReducers({ user });

//并创建文件use并创建index.tsx

export interface IUser {

    name: string;

    token: string;

  }

  export interface IUserState {

    user: IUser;

  }

  const initUserState: IUserState = {

    /* state默认值 */

    user: {

      name: "普通用户",

      token: "",

    },

  };

  export enum IUserActionType {

    /* Actions */

    INIT,

    CHANGE,

  }

  const user = (

    state: IUserState = initUserState,

    action: { type: IUserActionType; payload: any }

  ) => {

    const { payload } = action;

    switch (action.type) {

      case IUserActionType.INIT:

        return state;

      case IUserActionType.CHANGE:

        return { ...state, user: { ...state.user, ...payload } };

      default:

        return state;

    }

  };

  export default user;