react中redux的详细使用以及持久化处理

这篇具有很好参考价值的文章主要介绍了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 (
     <Provider store={store}>
      <IndexRouter />
      </Provider>
  );
}
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 (
        <Header style={{ padding: 0, }}>
          <Button
            type="text"
            // 使用仓库的折叠状态
            icon={props.isCollapsed ? <MenuUnfoldOutlined  /> : <MenuFoldOutlined />}
            // 更改action
            onClick={()=>isCollapsed()}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
          <div style={{float:'right',marginRight:"20px"}}>
            <span style={{marginRight:"20px"}}>欢迎admin回来</span>
        <Dropdown menu={{ items,
        onClick
        }}>
          <a onClick={(e) => e.preventDefault()}>
         <Space>
         <Avatar size="large" icon={<UserOutlined />}  />
       </Space>
       </a>
      </Dropdown>
          </div>
        </Header>
    )
}
// 更新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 (
          <SubMenu key={item.key} icon={item.icon} title={item.label}>
            {renderMenuItems(item.children)}
          </SubMenu>
        );
      } else {
        return (
          <Menu.Item key={item.key} icon={item.icon}>
            {item.label}
          </Menu.Item>
        );
      }
    });
  }

  const items = [
    {
      key: '/home',
      label: '首页',
      icon: <PieChartOutlined />,
    },
    {
      key: 'user-manage',
      label: '用户管理',
      icon: <DesktopOutlined />,
      children: [
        { key: '/user-manage/list', label: '用户列表', icon: <DesktopOutlined /> }
      ],
    },
    {
      key: 'right-manage',
      label: '权限管理',
      icon: <UserOutlined />,
      children: [
        { key: '/right-manage/role/list', label: '角色列表' },
        { key: '/right-manage/right/list', label: '权限列表' }
      ],
    },
    {
      key: 'news-manage',
      label: '新闻管理',
      icon: <TeamOutlined />,
      children: [
        { key: '/news-manage/add', label: "撰写新闻" },
        { key: '/news-manage/draft', label: '草稿箱' },
        { key: '/news-manage/category', label: '新闻分类' }
      ],
    },
    {
      key: 'audit-manage',
      label: '审核管理',
      icon: <FileOutlined />,
      children: [
        { key: '/audit-manage/audit', label: "审核新闻" },
        { key: '/audit-manage/list', label: '审核列表' },
      ],
    },
    {
      key: 'publish-manage',
      label: '发布管理',
      icon: <FileOutlined />,
      children: [
        { key: '/publish-manage/unpublished', label: "待发布" },
        { key: '/publish-manage/published', label: '已发布' },
        { key: '/publish-manage/sunset', label: '已下线' }
      ],
    },
  ];

  return (
    <div>
      {/* props.isCollapsed使用 */}
      <Sider trigger={null} collapsible collapsed={props.isCollapsed}>
        <div className="demo-logo-vertical">全球新闻发布管理系统</div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['home']}
          selectedKeys={[selectedKey]}
          defaultOpenKeys={select}
          onClick={onClick}
        >
          {renderMenuItems(items)}
        </Menu>
      </Sider>
    </div>
  );
}
// {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 (
        <div>
            {/* 为每个页面使用loading功能 */}
            <Spin size="large" style={{marginTop:"200px"}} spinning={props.loading} >
            <Switch>
            <Route path="/home" component={Home}/>
            <Route path="/user-manage/list" component={UserList}/>
            <Route path="/right-manage/role/list" component={RoleList}/>
            <Route path="/right-manage/right/list" component={RightList}/>

            <Route path="/news-manage/add" component={NewsAdd}/>
            <Route path="/news-manage/draft" component={NewsDraft}/>
            <Route path="/news-manage/category" component={NewsCategory}/>

            <Route path="/audit-manage/audit" component={AuditManage}/>
            <Route path="/audit-manage/list" component={AuditList}/>

            <Route path="/publish-manage/unpublished" component={Unpublished}/>

            <Route path="/publish-manage/published" component={Publishedd}/>
            <Route path="/publish-manage/sunset" component={Sunset}/>
            {/* 如果访问根路径回车精确匹配重定向到home页面 */}
            <Redirect from="/" to="/home" exact/>
            {/* 如果是随便输入或除了以上路径的其他路径显示404页面 */}
            <Route path="*" component={NoPermission}/>
            </Switch> 
            </Spin>
        </div>
    )
}

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文章来源地址https://www.toymoban.com/news/detail-694480.html

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 (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
      <IndexRouter />
      </PersistGate>
      </Provider>
  );
}
export default App;

到了这里,关于react中redux的详细使用以及持久化处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot日志持久化以及使用lombok输出日志

    上一篇文章介绍了日志级别和自定义输出日志 链接 https://blog.csdn.net/qq_45875349/article/details/132510387?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22132510387%22%2C%22source%22%3A%22qq_45875349%22%7D 那么想要将控制台上的日志信息,保存在硬盘上,以便出问题之后追溯

    2024年02月11日
    浏览(49)
  • 链路追踪SkyWalking整合项目以及数据持久化

    1.1 通过jar包方式整合 首先我们将一个简单的springboot服务打成jar包。 将其上传到Linux服务器中。 准备一个启动脚本,脚本内容如下: 等同于 参数名对应agent/config/agent.config配置文件中的属性。属性对应的源码: org.apache.skywalking.apm.agent.core.conf.Config.java 1.2 docker方式安装以及集

    2024年02月10日
    浏览(42)
  • Kali Live Boot把Kali 装在U盘(不想重装电脑使用kali的方法)并持久化 详细

    我只有一台电脑,又想用kali,那只能在虚拟机安装使用了,但是呢在虚拟机又不能使用电脑的硬件,比如无线网卡,当然另外买的除外,我说的是笔记本自带的网卡。而用这个方法就相当于在你的电脑上装了kali,但是又不会影响你之前用的系统。另外你还可以带着你的kali去网

    2024年02月05日
    浏览(40)
  • 2023-06-07:Redis 持久化方式有哪些?以及有什么区别?

    2023-06-07:Redis 持久化方式有哪些?以及有什么区别? 答案2023-06-07: Redis提供了两种持久化机制:RDB和AOF。 RDB持久化是将Redis当前进程中的数据生成快照并保存到硬盘的过程。快照指的是Redis在某一时刻的内存状态的记录,类似于拍照一样把数据保存下来,因此也被称为Redi

    2024年02月08日
    浏览(54)
  • Spark大数据处理讲课笔记--- RDD持久化机制

    理解RDD持久化的必要性 了解RDD的存储级别 学会如何查看RDD缓存 Spark中的RDD是懒加载的,只有当遇到行动算子时才会从头计算所有RDD,而且当同一个RDD被多次使用时,每次都需要重新计算一遍,这样会严重增加消耗。为了避免重复计算同一个RDD,可以将RDD进行持久化。 Spark中

    2024年02月06日
    浏览(45)
  • 快速搞懂Pinia及数据持久化存储(详细教程)

    一.安装及使用Pinia 1.安装Pinia两种方式都可,根据个人习惯来 2.在main.ts 中引入并挂载到根实例 3.src目录下新建store/study/index.js并写入 Store 是用defineStore()定义的,它的第一个参数是一个独一无二的id,也是必须传入的,Pinia 将用它来连接 store 和 devtools。 defineStore()第二个参数可

    2023年04月15日
    浏览(45)
  • yapi容器化docker部署以及mongodb容器的持久化挂载异常问题

    通过docker形式部署yapi,需要准备一个mongodb,然后直接在一个空文件夹里写好Dockerfile,其中通过wget下载yapi的zip包。 基本按照这篇文章:https://www.modb.pro/db/149666 来处理即可 把mongodb的docker 跑起来, --auth 表示需要密码才能访问 注意 原文中启动mongo的容器是这样的 首先创建Mon

    2024年02月14日
    浏览(54)
  • Android笔记(二十一):Room组件实现Android应用的持久化处理

    Room是Android JetPack架构组件之一,是一个持久处理的库。Room提供了在SQLite数据库上提供抽象层,使之实现数据访问。 (1)实体类(Entity):映射并封装了数据库对应的数据表中对应的结构化数据。实体定义了数据库中的数据表。实体类中的数据域与表的列一一对应。 (2)数

    2024年01月20日
    浏览(55)
  • [Kubernetes]5. k8s集群StatefulSet详解,以及数据持久化(SC PV PVC)

    前面通过 deployment 结合 service 来部署 无状态的应用 ,下面来讲解通过 satefulSet 结合 service 来部署 有状态的应用 无状态: 无状态 (stateless) 、牲畜 (cattle) 、无名 (nameless) 、可丢弃 (disposable) 有状态: 有状态 (stateful) 、宠物 (pet) 、具有名 (haviing name) 、不可丢弃 (non-disposable) St

    2024年02月01日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包