Redux + 持久化数据绑定

持久化配置

这是 index.ts文件 通常用来配置reducer

// import { configureStore  } from 'redux';
// import reducer from './reducer';

// // ==============================|| REDUX - MAIN STORE ||============================== //

// const store = configureStore(reducer);
// const persister = 'Free';

// export { store, persister };
import { configureStore  } from '@reduxjs/toolkit';
import reducer from './reducer';
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage';
// ==============================|| REDUX - MAIN STORE ||============================== //
//  持久化配置
// 定义配置
const persistConfig = {
    key: 'root',
    storage,
  };
  // 创建持久化 reducer
const persistedReducer = persistReducer(persistConfig, reducer);

const store = configureStore({
    reducer:persistedReducer,
    // 解决了序列化问题
    middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
  });
// 创建持久化存储器
const persistor = persistStore(store);

export { store, persistor };

这是 reducer.ts文件

import { combineReducers } from 'redux';
// reducer import
// import customizationReducer from './customizationReducer';
// import applicationReducer from './applicationReducer';
// import breadcrumbsReducer from './breadcrumbsReducer';
import userReducer from './userReducer';
// import breadcrumbsReducer from './breadcrumbsReducer';
import { applicationReducer } from './modules'
// ==============================|| COMBINE REDUCER ||============================== //

const reducer = combineReducers({
    // breadcrumbs: breadcrumbsReducer,
    application: applicationReducer,
    //   application: applicationReducer,
    //   breadcrumbs: breadcrumbsReducer,
    user:userReducer
});

export default reducer;

这是封装的userReducer.ts文件

import { AnyAction, createAction } from '@reduxjs/toolkit';
import {userInfoProps} from './types';

export const setUserInfo = createAction<userInfoProps>('SET_USERINFO');
export const clearUserInfo = createAction('CLEAR_USERINFO');

const userReducer = (state: userInfoProps = {username:'wangshixian'}, action: AnyAction) => {
  switch (action.type) {
    case setUserInfo.type:
      return {
        ...state,
        ...action.payload
      };
    case clearUserInfo.type:
      return {
        
      };
    default:
      return state;
  }
};

export default userReducer;

使用方法

首先需要引入

import { useDispatch, useSelector } from 'react-redux';

//这是使用函数
import userReducer, { clearUserInfo, setUserInfo } from '@/store/userReducer';

//使用的方法

const dispatch = useDispatch();
  const userInfo = useSelector((state:any) => state.user);
 
useEffect(() => {
    // dispatch(setUserInfo({ username: 'John Doe', }));
    console.log(userInfo);
  }, [userInfo]);

  const handleClearUserInfo = () => {
    dispatch(clearUserInfo());
  };
  const setUserInfos= ()=>{
    dispatch(setUserInfo({ username: 'John Doe',account:'12312313' }));
  }
  
  
  这是最基本的Redux 使用方法
  不用自己去做持久化存储