Redux-Persist 与 Redux-Toolkit的使用

Redux-Persist 与 Redux-Toolkit的使用

背景

redux-toolkit解决了Redux的配置使用过于繁琐，redux-persist则是解决持久化存储(刷新丢失数据的问题)

实例

1. 先创建一个需要存储的reducer,这里存取用户信息来举个例子(下载依赖就不赘述了)

// src/reudx/reducer/userInfo
import { createSlice } from '@reduxjs/toolkit';

// 1.使用createSlice方法创建一个slice。每一个slice里面包含了reducer和actions

export const counterSlice = createSlice({
    // 命名空间，在调用action的时候会默认的设置为action的前缀,保证唯一.不重名
    name: 'userInfo',

    // state数据的初始值
    initialState: {
        userInfo: {
            name:'',
            age: 0
        },
    },

    // 定义的action-赋值的方式进行数据的改变
    reducers: {
        updateInfo: (state, { payload }) => {
            state.userInfo = { ...payload };
        },
        // 更新用户名
        updateUsername: (state, { payload }) => {
            state.userInfo = { ...state.userInfo, name: payload };
        },
    },
});

// Action creators are generated for each case reducer function
export const { updateInfo,updateUsername } = counterSlice.actions;

export default counterSlice.reducer;

2. 配置持久化store对象

// src/reudx/index.js

import { configureStore } from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage';
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import thunk from 'redux-thunk';

// 创建的reducer
import userInfoReducer from './reuducer/userInfoReducer';

// combineReducers合并reducer
const reducers = combineReducers({
  userInfo: userInfoReducer,
});

const persistConfig = {
  key: 'root',
  storage,
  // 黑名单 不缓存的
  blacklist:['page404']
};

const persistedReducer = persistReducer(persistConfig, reducers);

const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.NODE_ENV !== 'production',
  middleware: [thunk],
});

export default store;

3. 在App.js定义全局

...
import { Provider } from 'react-redux';
import store from 'src/reudx/index'
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';

let persistor = persistStore(store);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

4. 页面中使用

    <!-- import store from 'src/reudx/index' -->
    import { useDispatch } from 'react-redux';
    import { updateInfo } from 'src/reudx/reducer/userInfo';
    import { useEffect } from 'react';
    import { getUserApi } from 'src/apis/auth';

    const Mycomonent = () => {

        const dispatch = useDispatch();

        <!-- ----------   获取用户信息数据  ------------- -->
         const user = useSelector(state => state.userInfo.userInfo);

        useEffect(() =>{
        // 请求用户数据
        const res = await getUserApi()

        <!-- ----------   存取用户信息数据  ------------- -->

        <!-- 1. 可以直接引用store对象(这种用于非组件 函数内) -->
        <!-- store.dispatch(updateInfo(res.data)); -->

        //  2. 利用redux 提供的 useDispatch
        dispatch(updateInfo(res.data))
         
        },[])

        return <>
            <p>{user.name}</p>
        <>
    }