React Redux使用配置详解

目录
  • 前言
  • redux三大原则
  • redux执行流程
  • redux具体使用
  • 执行流程
  • redux使用流程

前言

在使用redux之前，首先了解一下redux到底是什么？

用过vue的肯定知道vuex，vuex是vue中全局状态管理工具，主要是用于解决各个组件和页面之间数据共享问题，对数据采用集中式管理，而且可以通过插件实现数据持久化

redux跟vuex类似，最主要的就是用作状态的管理，redux用一个单独的常量状态state来保存整个应用的状态，可以把它想象成数据库，用来保存项目应用中的公共数据

Redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（state对象）保存这一整个应用的 状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers），这 样就可以进行数据追踪，实现时光旅行。

redux三大原则

  1. state以单一的对象存储在store中
  2. state是只读的只能通过action修改
  3. 使用纯函数reducer执行数据的更新

redux执行流程

  1. React组件从store获取redux中的数据
  2. 当页面数据要进行修改的时候，我们通过dispatch提交actions到store
  3. store把actions提交reducers中执行对应的逻辑，修改state中的数据
  4. 更新后的state数据返回到store中，更新React组件页面上的数据

redux具体使用

在使用redux之前，我们首先要安装redux，通过下面命令进行安装

npm i redux --save

安装好可以在根目录package.json文件检查是否安装成功

接下来开始配置redux，首先在src目录下创建一个store文件夹，用来存放redux数据

接着在store新建一个js文件index.js,在index.js中配置redux内容

执行流程

在index.js中导入createStore方法，创建redux数据的方法

  1. 创建reducers出函数，纯函数有两个参数state 初始化的数据 ，actions修改state数据逻辑
  2. switch判断actions中提交type类型执行state修改，返回修改的结果
  3. createStore方法创建store对象，export default 抛出对象的值
  4. 在使用redux的页面导入index.js文件即可

store/index.js

//1. 导入createStore方法
import { createStore } from "redux";
//2. 创建一个reducer纯函数的方法, state初始化数据， actions修改数据行为
const reducer = function (state, actions) {
    //定义初始化的数据
    if (!state) {
        state = {
            count: 10,
        }
    }
    //定义actions的逻辑代码区域，处理逻辑的信息
    switch (actions.type) {
        //调用执行+1的逻辑
        case "PLUS":
            return {
                ...state,
                count: state.count + actions.payload,
            }
            break;
        case "JIAN":
            return {
                ...state,
                count:state.count-actions.payload
            }
            break;
        default:
            return {
                ...state
            }
    }
}
//创建store的对象
const store = createStore(reducer);
//抛出store的对象值
export { store };

redux使用流程

获取redux中的数据，通过store.getState()

修改数据使用dispatch

dispatch({type:"类型",payload:额外的参数})

home.js

import React, { useEffect, useState } from 'react';
import { store } from './index';
export default function Home(props) {
    const [counts,setCounts]=useState(store.getState().count)
    useEffect(()=>{
        let unsubscribe=store.subscribe(()=>{
            let {count}=store.getState()
            console.log(count);
            setCounts(count)
        })
        return()=>{
            unsubscribe()
        }
    },[])
  return (
    <div>
        <h3>{counts}</h3>
        <button onClick={()=>store.dispatch({type:'PLUS',payload:2})}>count++</button>
        <button onClick={()=>store.dispatch({type:'JIAN',payload:2})}>count--</button>
    </div>
  )
}

直接调用方法页面数据不发生变化，我们使用useEffect和subscribe对数据进行监听，监听页面数据的刷新和更改

到此这篇关于React Redux使用配置详解的文章就介绍到这了,更多相关React Redux 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • react18中react-redux状态管理的实现

    react的状态管理还是挺多的现在流行的有以下五种: Recoil MobX XState Redux Context 今天我们来讲一下react众多状态管理之一的redux,虽然这个我不太喜欢用,但是我觉得简单的状态管理谁都会,但是难的就是程序员的分水岭,所以今天来给大家讲一下redux. 下面我们来讲讲redux的优点: 可以在众多组件中传值,突破react单向数据流的限制 不仅支持react还支持vue等主流框架 当然是好用方便啦 接下来我们讲一下啥时候去使用他 在我们有好多组件,但是组件

  • React 中使用 Redux 的 4 种写法小结

    React 中使用 Redux 的 4 种写法小结

    目录 不使用 Redux 的写法 最底层的写法 React-Redux React-Redux 配合 connect 高阶组件 React-Rudex 配合 React Hooks Redux Toolkit 总结 Redux 是一种状态容器 JS 库,提供可预测的状态管理,经常和 React 配合来管理应用的全局状态,进行响应式组件更新. Redux 一般来说并不是必须的,只有在项目比较复杂的时候,比如多个分散在不同地方的组件使用同一个状态.对于这种情况,如果通过 props 层层传递,代码会

  • react redux及redux持久化示例详解

    react redux及redux持久化示例详解

    目录 一.react-redux 二.redux持久化 一.react-redux react-redux依赖于redux工作. 运行安装命令:npm i react-redux: 使用: 将Provider套在入口组件处,并且将自己的store传进去: import FilmRouter from './FilmRouter/index' import {Provider} from 'react-redux' import store from './FilmRouter/views/red

  • react redux的原理以及基础使用讲解

    react redux的原理以及基础使用讲解

    目录 介绍 为什么会使用 redux? 什么时候该使用 redux? redux使用场景 redux 作用 工作流程 使用 1.下载 2.创建仓库store骨架 3.生成仓库 4.参数函数的创建 reducer 5.引入reducer来辅助store的创建 介绍 为什么会使用 redux? vue 是一个 MVVM层,可以实现 双向数据绑定,而 react 只能算一个 view 层,状态改变了只有去调用setState({xxx}) 才能去修改视图,当我们数据很复杂的时候可能需要用到 redux

  • react redux中如何获取store数据并将数据渲染出来

    react redux中如何获取store数据并将数据渲染出来

    目录 前景提要 1.创建仓库骨架并书写初始代码 2.正式开始 3.store 数据获取方法(可略过) 4.数据的获取与展示 前景提要 如果不了解基础的话 ----- 点击此处 本文着重实现效果,不会讲太多原理问题 未使用 react-redux 管理工具 1.创建仓库骨架并书写初始代码 src 目录下创建 //store/index.js 代码 import { createStore } from 'redux'; import reducer from "./reducer" co

  • react.js框架Redux基础案例详解

    react.js框架Redux基础案例详解

    react.js框架Redux https://github.com/reactjs/redux 安装: npm install redux react-redux #基于react,我们在前面已经安装过了 Redux参考文档: http://redux.js.org/ Redux核心概念:Store 我们可以简单的理解为就是用来存储 各个组件的State或你自己定义的独立的state,对state进行统一读取.更新.监听等操作. http://redux.js.org/docs/basics/

  • React与Redux之数组处理讲解

    本文将介绍一些常用的数组处理函数和语法,如reduce().filter().map().every().some().展开运算符.这些知识和React与Redux本身没有直接关系,但是本章的示例中包含了这些函数和语法的用法,我们正好可以在程序中学习它们.另外值得一提的是,reduce().filter().map()等函数的思想来自函数式编程,感谢JavaScript是一门函数式编程语言,让原本复杂的逻辑处理变得如此简单. reduce() 概述 reduce()方法接收一个函数作为累加器(a

  • react-redux的基本使用

    react-redux的基本使用

    目录 react-redux和redux的关系? react-redux基本使用 1.安装 2.配置 3.组件中使用 react-redux和redux的关系? redux是react中进行状态管理的js库(不是react插件),一般是管理多个组件中共享数据状态,和vue中的vuex是一样的 react-redux是redux官方react绑定库,能够使react组件从redux store中读取数据,并且向store分发actions以此来更新数据,说白了就是用于连接redux,它提供了con

  • 详解React 和 Redux的关系

    详解React 和 Redux的关系

    目录 一.redux和react的关系 二.react多组件共享 三.redux的三个核心概念 1.store 2.action (动作) 3.reducer (纯函数) 总结 文档: Redux中文文档 Redux 官方文档对 Redux 的定义是:一个可预测的 JavaScript 应用状态管理容器. 一.redux和react的关系 Redux并不只为react应用提供状态管理, 它还支持其它的框架. React 是 DOM 的一个抽象层(UI 库),并不是 Web 应用的完整解决方案.因

  • React Redux使用配置详解

    React Redux使用配置详解

    目录 前言 redux三大原则 redux执行流程 redux具体使用 执行流程 redux使用流程 前言 在使用redux之前,首先了解一下redux到底是什么? 用过vue的肯定知道vuex,vuex是vue中全局状态管理工具,主要是用于解决各个组件和页面之间数据共享问题,对数据采用集中式管理,而且可以通过插件实现数据持久化 redux跟vuex类似,最主要的就是用作状态的管理,redux用一个单独的常量状态state来保存整个应用的状态,可以把它想象成数据库,用来保存项目应用中的公共数据

  • React Redux应用示例详解

    目录 一 React-Redux的应用 1.学习文档 2.Redux的需求 3.什么是Redux 4.什么情况下需要使用redux 二.最新React-Redux 的流程 安装Redux Toolkit 创建一个 React Redux 应用 基础示例 Redux Toolkit 示例 三.使用教程 安装Redux Toolkit和React-Redux​ 创建 Redux Store​ 为React提供Redux Store​ 创建Redux State Slice​ 将Slice Reduc

  • react 路由Link配置详解

    1.Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:"/xx",search:'?键值对',hash:"#xxx",state:{键值对}} 会自动将pathname.search.hash拼接在url路径上,state为传入的参数 可通过输出props查看对象内的信息 this.props.location.state.键名获取state内的数据 2.Link的replace属性 添加replace将跳转前的上一个页面替换

  • React TypeScript 应用中便捷使用Redux Toolkit方法详解

    目录 前言 背景 Redux-Toolkit 常规使用 优化方案 优化 useDispatch 和 useSelector 优化修改 redux 状态的步骤 总结 前言 本文介绍的主要内容是 Redux-Toolkit 在 React + TypeScript 大型应用中的实践,主要解决的问题是使用 createSlice 的前提下消费 redux 状态仍旧有点繁琐的问题. 阅读本文需要的前置知识:了解 React .Redux-Toolkit .TypeScript 的使用. 关于 Redux

  • 原生微信小程序开发中 redux 的使用详解

    原生微信小程序开发中 redux 的使用详解

    前提 复杂场景中有不少数据需要在多个不同页面间来回使用和修改.但是小程序页面直接的数据通信方式十分的简单.通常情况需要自己维护一个全局的对象来存放共有数据.但是,简单的维护一个共有数据实体,会随着业务逻辑的不断复杂化而变的过分庞大,并且数据的修改往往无法很好的溯源.加之公共数据实体中数据的修改和页面的UI之间没有太好的同步手段,往往需要在页面和对应的数据实体中同时都维护一份相同的数据,操作十分的不方便. 之前使用过Taro以react+redux的结构来开发微信小程序,依托redux整体上可以解

  • React 路由使用示例详解

    React 路由使用示例详解

    目录 Router 简单路由 嵌套路由 未匹配路由 路由传参数 索引路由 活动链接 搜索参数 自定义行为 useNavigate 参考资料 Router react-router-dom是一个处理页面跳转的三方库,在使用之前需要先安装到我们的项目中: # npm npm install react-router-dom@6 #yarn yarn add react-router-dom@6 简单路由 使用路由时需要为组件指定一个路由的path,最终会以path为基础,进行页面的跳转.具体使用先看

  • spring boot中的properties参数配置详解

    application.properties application.properties是spring boot默认的配置文件,spring boot默认会在以下两个路径搜索并加载这个文件 src\main\resources src\main\resources\config 配置系统参数 在application.properties中可配置一些系统参数,spring boot会自动加载这个参数到相应的功能,如下 #端口,默认为8080 server.port=80 #访问路径,默认为/

  • Redis 对比 Memcached 并在 CentOS 下进行安装配置详解

    Redis 对比 Memcached 并在 CentOS 下进行安装配置详解

    Redis 是一个开源.支持网络.基于内存.键值对的 Key-Value 数据库,本篇文章主要介绍了Redis 对比 Memcached 并在 CentOS 下进行安装配置详解,有兴趣的可以了解一下. 了解一下 Redis Redis 是一个开源.支持网络.基于内存.键值对的 Key-Value 数据库,使用 ANSI C 编写,并提供多种语言的 API ,它几乎没有上手难度,只需要几分钟我们就能完成安装工作,并让它开始与应用程序顺畅协作.换句话来说,只需投入一小部分时间与精力,大家就能获得立竿

随机推荐