某天下午折騰著玩的 – 筆記

安裝相關(guān)依賴

npm install @reduxjs/toolkit redux-persist redux react-redux

// store.jsx
import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; // 選擇持久化存儲(chǔ)引擎，如 localStorage 或 AsyncStorage

import rootReducer from "./reducers/index"; // 導(dǎo)入您的根 reducer

// 配置持久化設(shè)置
const persistConfig = {
  key: "root", // 存儲(chǔ)的鍵名
  storage, // 持久化存儲(chǔ)引擎
  // 可選的配置項(xiàng)，如白名單、黑名單等 選其一就好了
  // blacklist:['test'], // 只有 test 不會(huì)被緩存
  // whitelist: ["test"], // 只有 test 會(huì)被緩存
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: false, // 禁用嚴(yán)格模式
  }),
});

const persistor = persistStore(store);

export { store, persistor };

將 store 提供給應(yīng)用程序：將 Redux store 提供給根組件，以便在整個(gè)應(yīng)用程序中可以訪問(wèn)到 Redux 狀態(tài)

// main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "./redux/store";
import App from "./App";

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

reducer 示例：

// reducers/index.jsx
import { combineReducers } from "redux";
import userReducer from "./user";
import baseReducer from "./base";

const rootReducer = combineReducers({
  user: userReducer,
  base: baseReducer,
});

export default rootReducer;

// reducers/user.jsx
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  token: "默認(rèn)值token",
  isLogin: false,
};

const user = createSlice({
  name: "user",
  initialState,
  reducers: {
    setToken: (state, action) => {
      // 將傳入的值設(shè)置為 token 的新值
      state.token = action.payload;
    },
  },
});

export const { setToken } = user.actions;
export default user.reducer;

在組件中使用文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-625321.html

// App.jsx
import { useSelector, useDispatch } from "react-redux";
import { setToken } from "./redux/reducers/user";

const App = () => {
  const user = useSelector((state) => state.user);
  // 在頁(yè)面組件中使用 useDispatch 獲取 dispatch 函數(shù)，用于派發(fā) action
  const dispatch = useDispatch();
  const setTokenFun = () => {
    dispatch(setToken("一個(gè)新的token"));
  };
  
  return (
    <>
      <p>token=====：{user.token}</p>
      <Button type="primary" onClick={setAddressFun}>
        Set Token
      </Button>
    </>
  );
};

export default App;

到了這里，關(guān)于react中使用redux-persist做持久化儲(chǔ)存的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！