关注微信公众号【前端成长营】持续更新…
文章目录
- 1.安装 Redux Toolkit 和 React-Redux
- 2.在store中创建 reducers目录 创建比如 aside.js 或者 tab.js 下面以tab为例
- 3. 项目根目录 index.js文件中
- 4. 在组件中使用 store中的数据
- 5. 使用reducer 修改store中的数据
- 6. redux-persist 是一个在 Redux 应用程序中实现持久化的库,它可以将 Redux store 中的状态数据保存到浏览器的 localStorage、sessionStorage 或其他存储中,以便在页面刷新或重新加载时恢复这些数据。以下是 redux-persist 的基本使用教程:**
微信扫码体验一下 (说不定哪天你就用得上)
1.安装 Redux Toolkit 和 React-Redux
npm install @reduxjs/toolkit react-redux
在src目录中创建 store文件目录 创建 / index.js
import { configureStore } from "@reduxjs/toolkit";
export default configureStore({
reducer: {
},
});
2.在store中创建 reducers目录 创建比如 aside.js 或者 tab.js 下面以tab为例
(也可以不创建redecers目录 根据自己开发习惯,主要为了分类,把命名空间的store都放一起)
import { createSlice } from "@reduxjs/toolkit";
const tabSlice = createSlice({
name:'tab',
initialState: {
fold: false,
},
reducers:{
collapseMenu :state=>{ //collapseMenu将修改fold的值
state.fold=!state.fold
}
}
})
export const {collapseMenu}= tabSlice.actions
export default tabSlice.reducer
//tabSlice.actions包含整个所有方法
等这一步完成后 在store/index.js文件中导入tab
import { configureStore } from '@reduxjs/toolkit'
import tab from './reducers/tab'
export default configureStore({
reducer:{
tab
}
})
//如果页面中想使用initialState的值 使用
// import { useSelector } from "react-redux";
// const count = useSelector((state) => state.tab.fold);
3. 项目根目录 index.js文件中
使用 Provider 包裹App 并传入store
import { Provider } from "react-redux";
import store from "./store/index";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
4. 在组件中使用 store中的数据
引入import {useSelector} from ‘react-redux’
5. 使用reducer 修改store中的数据
在组件的方法中 通过dispatch接收 useDispatch()
方法 然后调用 上面第2步中tab.js中的方法
是否
6. redux-persist 是一个在 Redux 应用程序中实现持久化的库,它可以将 Redux store 中的状态数据保存到浏览器的 localStorage、sessionStorage 或其他存储中,以便在页面刷新或重新加载时恢复这些数据。以下是 redux-persist 的基本使用教程:**
- 安装 redux-persist
首先,你需要在你的项目中安装 redux-persist。可以使用 npm 或 yarn 进行安装:
npm install redux-persist
# 或者
yarn add redux-persist
- 配置 redux-persist
在 Redux 应用的根目录下,你需要创建一个配置文件来配置 redux-persist 的设置。例如,你可以创建一个名为 persistConfig.js 的文件,并在其中指定要持久化的 Redux 存储的键、存储引擎以及其他配置选项:
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage
const persistConfig = {
key: 'root', // 可选,用于在localStorage中设置键名
storage, // 存储引擎,默认使用localStorage
// 其他配置选项...
};
export default persistConfig;
- 创建持久化的 Reducer
在 Redux 应用的根目录下,你需要创建一个根 reducer,并使用 redux-persist 的 persistReducer 函数来包装你的根 reducer。这样,你就可以指定哪些 reducer 的状态应该被持久化:
import { combineReducers } from 'redux';
import persistReducer from 'redux-persist/es/persistReducer';
import persistConfig from './persistConfig'; // 引入之前创建的persistConfig
// 你的 reducer 文件
import rootReducer from './reducers';
const persistedReducer = persistReducer(persistConfig, rootReducer);
export default persistedReducer;
- 创建 Redux 存储
在应用的入口文件中(通常是 index.js 或 App.js),你需要创建 Redux 存储,并使用 redux-persist 的 persistStore 函数和 PersistGate 组件来包装你的应用。PersistGate 组件会阻塞你的应用的渲染,直到持久化的状态被加载完成:
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import persistedReducer from './reducers/persistedReducer'; // 引入之前创建的persistedReducer
const store = createStore(persistedReducer);
const persistor = persistStore(store);
// 在你的应用根组件中使用 PersistGate
function App() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
{/* 你的应用组件 */}
</PersistGate>
</Provider>
);
}
export default App;