react.js 前端 前端框架 react中redux的详细使用以及持久化处理

一.redux使用

1.安装

npm i  redux

例一：

2.创建redux文件夹，store.js文件

store.js文件

import {legacy_createStore as createStore,combineReducers}from "redux"

// 每一块状态内容对应一个reducer文件

import {CollApsedReducer} from "./CollapsedReducer"

import {LoadingReducer}from "./LoadingReducer"

// combineReducers合并多个reducer

const reducer=combineReducers({

CollApsedReducer,

LoadingReducer

})

// createStore里面只能放一个reducer,所以上面合并处理一下

const store=createStore(reducer)

export default store

3.将提供者绑定到跟组件内外层，使每个被包裹的组件都可以使用store

import React from 'react';

import IndexRouter from "../src/router"

import {Provider}from "react-redux"

import store from "../src/redux/store"

function App() {

return (

);

}

export default App;

4.更改状态

import React , { useState }from 'react'

import { Layout,Button ,Avatar, Space,Dropdown } from 'antd';

import {

MenuFoldOutlined,

MenuUnfoldOutlined,

UserOutlined

} from '@ant-design/icons';

import { useHistory } from 'react-router-dom'

import {connect}from "react-redux"

const { Header } = Layout;

// 接收props并使用

function TopHeader(props) {

console.log(props);

// const [collapsed, setCollapsed] = useState(false);

const history = useHistory()

const isCollapsed=()=>{

props.changeCollapsed()

}

const items = [

{

key: '1',

primary: true,

label: '超级管理员',

},

{

key: '2',

danger: true,

label: '退出登录',

},

];

const onClick = ({ key }) => {

if(key==="2"){

localStorage.removeItem("token")

history.push({pathname: '/login'})

}

};

return (

)

}

// 更新props

const mapStateToProps=({CollApsedReducer:{isCollapsed}})=>{

return{

isCollapsed

}

}

// 更新action

const mapDispatchToProps={

changeCollapsed(){

return {

type:"change_collapsed"

}

}

}

// connect()(组件名)

// connect函数将组件连接到store仓库

export default connect(mapStateToProps,mapDispatchToProps)(TopHeader)

5.使用状态变化的组件

import React, { useState, useEffect } from 'react';

import { useHistory, withRouter } from 'react-router-dom';

import { Layout, Menu } from 'antd';

import { UserOutlined, DesktopOutlined, FileOutlined, PieChartOutlined, TeamOutlined } from '@ant-design/icons';

import "../newssandbox/index.css";

// 引入connect

import {connect}from "react-redux"

const { Sider } = Layout;

const { SubMenu } = Menu;

function SideMenu(props) {

// props接收

const [selectedKey, setSelectedKey] = useState(null);

const select=[props.location.pathname.split("/")[1]]

const history = useHistory();

const onClick = (e) => {

history.push(e.key);

};

useEffect(() => {

// 根据路由变化更新选中的菜单项

const currentPath = props.location.pathname;

setSelectedKey(currentPath);

}, [props.location.pathname]);

function renderMenuItems(items) {

return items.map((item) => {

if (item.children) {

return (

{renderMenuItems(item.children)}

);

} else {

return (

{item.label}

);

}

});

}

const items = [

{

key: '/home',

label: '首页',

icon: ,

},

{

key: 'user-manage',

label: '用户管理',

icon: ,

children: [

{ key: '/user-manage/list', label: '用户列表', icon: }

],

},

{

key: 'right-manage',

label: '权限管理',

icon: ,

children: [

{ key: '/right-manage/role/list', label: '角色列表' },

{ key: '/right-manage/right/list', label: '权限列表' }

],

},

{

key: 'news-manage',

label: '新闻管理',

icon: ,

children: [

{ key: '/news-manage/add', label: "撰写新闻" },

{ key: '/news-manage/draft', label: '草稿箱' },

{ key: '/news-manage/category', label: '新闻分类' }

],

},

{

key: 'audit-manage',

label: '审核管理',

icon: ,

children: [

{ key: '/audit-manage/audit', label: "审核新闻" },

{ key: '/audit-manage/list', label: '审核列表' },

],

},

{

key: 'publish-manage',

label: '发布管理',

icon: ,

children: [

{ key: '/publish-manage/unpublished', label: "待发布" },

{ key: '/publish-manage/published', label: '已发布' },

{ key: '/publish-manage/sunset', label: '已下线' }

],

},

];

return (

);

}

// {CollApsedReducer:{isCollapsed}}CollApsedReducer reducer文件导出的变量名,isCollapsed状态，此处进行解构

const mapStateToProps=({CollApsedReducer:{isCollapsed}})=>{

return{

isCollapsed

}

}

export default connect(mapStateToProps)(withRouter(SideMenu));

例二：

1.新建LoadingReducer.js文件

export const LoadingReducer=(prevState={

loading:false

},action)=>{

let {type,payload}=action

switch (type) {

case 'change_loading':

// 复制老状态,不可直接修改

let newState={...prevState}

newState.loading=payload

return newState

default:

return prevState

}

}

2.路由文件

import React from 'react'

import {Route,Switch,Redirect}from "react-router-dom"

import Home from "../../views/newssandbox/home/Home"

import UserList from "../../views/newssandbox/user-mange/UserList"

import RoleList from"../../views/newssandbox/right-manage/RoleList"

import RightList from"../../views/newssandbox/right-manage/RightList"

import NoPermission from "../../views/newssandbox/nopermission/Nopermission"

import NewsAdd from "../../views/newssandbox/news-manage/NewsAdd"

import NewsDraft from "../../views/newssandbox/news-manage/NewsDraft"

import NewsCategory from "../../views/newssandbox/news-manage/NewsCategory"

import AuditManage from "../../views/newssandbox/audit-manage/AuditManage"

import AuditList from "../../views/newssandbox/audit-manage/AuditList"

import Unpublished from "../../views/newssandbox/publish-manage/Unpublished"

import Publishedd from "../../views/newssandbox/publish-manage/Publishedd"

import Sunset from "../../views/newssandbox/publish-manage/Sunset"

import { Spin } from 'antd';

import {connect}from "react-redux"

function NewsRouter(props) {

return (

)

}

const mapStateToProps=({LoadingReducer:{loading}})=>{

return{

loading

}

}

const mapDispatchToProps={

changeCollapsed(){

return {

type:"change_loading"

}

}

}

export default connect(mapStateToProps,mapDispatchToProps)(NewsRouter)

3.在axios封装文件内使用

import axios from "axios";

import store from "../redux/store";

axios.defaults.baseURL = "http://localhost:3000";

axios.interceptors.request.use(

(config) => {

// 显示loading

store.dispatch({

type: "change_loading",

payload: true,

});

return config;

},

(error) => {

return Promise.reject(error);

}

);

axios.interceptors.response.use(

(response) => {

// 隐藏loading

store.dispatch({

type: "change_loading",

payload: false,

});

return response;

},

(error) => {

// 隐藏loading

store.dispatch({

type: "change_loading",

payload: false,

});

return Promise.reject(error);

}

);

export default axios;

二.持久化

1.安装

npm i redux-persist

2.store.js文件配置持久化

import {legacy_createStore as createStore,combineReducers}from "redux"

import {CollApsedReducer} from "./CollapsedReducer"

import {LoadingReducer}from "./LoadingReducer"

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

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

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

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

const reducer=combineReducers({

CollApsedReducer,

LoadingReducer

})

//定义配置的信息

const persitConfig = {

// 代表存储名,随便起

key:"root",

storage,

// 如果不想将部分state持久化，也可以将其放入黑名单(blacklist)中,白名单whitelist

// 将loading 模块不做持久化

blacklist:["LoadingReducer"]

}

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

const persistReducers = persistReducer(persitConfig,reducer);

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

const store=createStore(persistReducers)

const persistor =persistStore(store);

export{store,persistor}

3.仓库导出方式更改了，组件引入方式要改变

4.根组件内使用PersistGate

import React from 'react';

import IndexRouter from "../src/router"

import {Provider}from "react-redux"

import {store,persistor} from "../src/redux/store"

// 在入口文件中使用 PersistGate 包裹根组件。将延迟渲染app 视图直到持久化状态取回并保存到redux中

import {PersistGate}from "redux-persist/integration/react"

function App() {

return (

);

}

export default App;

推荐链接

 您阅读本篇文章共花了： 

大家都在找：

react.js：react.js菜鸟教程

前端：前端面试题2024

前端框架：前端框架bootstrap

Redux：热镀锌方管理论重量