React-Redux

已于 2022-10-14 23:20:23 修改
阅读量434 收藏 1
点赞数
分类专栏： React 文章标签： react.js 前端 javascript
于 2022-10-07 22:56:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40429067/article/details/127200538
版权

Redux

1. 安装Redux
yarn add redux
2. 分析Redux原理图

在这里插入图片描述

  • 对于整个Redux原理图，可以理解为点餐流程，React Component是顾客，Action Creations是服务员，Store是专门负责将菜单录入点餐系统通知后厨的录入人员，Reducers是点餐系统。
  • 顾客按照菜单格式，勾选菜单上的菜品以及数量（创建Action），然后将菜单给服务员，服务员把菜单交给录入人员（发送Action），录入人员将菜单录入点餐系统（交给Reducer），点餐系统录入菜单后结合之前已点的菜的价格显示总价格和需要等待的时间，顾客如果想要得知当前菜单总价格可以找录入人员
  • React Component只需要创建Action用于封装此次要干的事件内容，并将Action 分发给Store，Store将当前接收的Action，以及上一次Action作用的结果一起发送给Reducer，Reducer拿到Action和上次Action作用的结果，进行具体的逻辑操作，并将当前Action的处理结果反馈给Store，React Component通过Store得知当前Action的作用结果

Redux-Thunk

同步Action和异步Action
  • 同步action的返回值必须是一个对象
  • 异步action的返回值是一个函数，如果想要store能够执行异步action，也就是执行异步action的方法，则需要安装redux-thunk中间件
  • 异步action一般都会调用同步action，期间只是为了等待一个ajax请求的回调或者一个定时器，所以异步action的形参会接收到一个store的dispatch，不需要通过store调用dispatch，action是组件自身传递给store的，action自身不引入store

React-Redux

  • React-Redux把组件分为两类：UI组件和容器组件
    在这里插入图片描述

  • 容器组件需要借助connnect连接连接UI组件和Redux

UI组件只能读取容器组件提供的状态值，这个值是容器组件从Store那里获取的
UI组件要想改变页面数据，使页面重新渲染，必须发出创建Action的动作，将创建Action的任务交给容器组件，容器组件的connect方法，可以接收到store返回的reducer的返回值，以及向Reducer发送action
reducer专门负责接收上一个状态以及当前UI组件通过容器组件，通过store传递过来的action
在这里插入图片描述
在这里插入图片描述

  • UI组件使用容器组件为其提供的创建Action的方法以及从Store中存储的值来渲染页面和触发页面再次渲染
  • 容器组件通过connect函数连接UI组件和Store，同时将UI组件执行的Action通过接收到的来自Store的dispatch方法传递给Reducer，以及从Store那里读取Reducer执行Action的返回值给UI组件
  • Store负责管理所有的Reducer，以及中间件，并通过Provider监听Redux对状态的改变，触发页面的渲染
  • Reducer接收上一个Action的返回值，以及当前Action，通过switch判断当前Action所要执行的内容，并返回执行结果
35s
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【React】React-Redux
南栀的博客
04-21 3845
react-redux
React-redux使用教程
xm1037782843的博客
10-30 2792
react-redux,Redux 是 JavaScript 应用的状态容器
月哥-前端-社招1
08-03
月哥-前端-社招1
React笔记（八）Redux
m0_74343097的博客
09-03 1616
为了方便使用，Redux 的作者封装了一个 React 专用的库，本文主要介绍它。React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。
一文学会react+redux（模块化/同步/异步操作）
m0_49827178的博客
06-06 689
太久没看react，闲来无事重新捡起做一点笔记，希望对部分vue的同行想学习react+redux起到一些帮助
React-Redux详解
虎哥LoveDroid
04-23 5213
React-Redux是一个用于在React应用中管理状态的第三方库。它是基于Redux架构的，提供了一种在React应用中高效管理状态的方式。React-Redux通过将Redux的核心概念和React组件相结合，使得在React应用中使用Redux变得更加简单和方便。React-Redux是一个用于在React应用中管理状态的第三方库。它是基于Redux架构的，提供了一种在React应用中高效管理状态的方式。
React-redux学习
hy313161875的博客
01-06 168
react-redux 将redux引入到react里面去使用。 1).import {Provider} from "react-redux"; 将redux store中的值传入react组件 例子：<Provider store={store}> <App /> </Provider> 2)...
React-Redux中的connect
weixin_44809439的博客
06-04 545
state和props区别 简言之，props就是从外部传进组件的参数，数据从父组件传递给子组件，子组件就可以从props中来用这些数据，props的数据不能被修改，只能通过改变父组件传递的数据来改变子组件中的props。 state就是组件自己的数据存储的地方，state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，state是可以被改变的。 同时修改state中的数据时，不能直接去修改，只能通过setState来修改。 UI组件，容器组件和无状态组件 UI组件
react-redux
04-04
React-Redux 是一个用于连接 React 组件到 Redux store 的库，它使得在 React 应用中使用 Redux 变得更加方便。React 是一个用于构建用户界面的 JavaScript 库，而 Redux 是一个可预测化状态容器，常用于管理应用的...
typescript-react-redux-ie8:Typescript-react-redux-ie8，在线演示
05-11
TypeScript-React-Redux (IE8+)本项目是一个兼容IE8的 TypeScript + React + Redux + immutablejs 的项目模板。为了降低上手难度，我在项目中写3个DEMO：todomvc without immutabeljs (ts + react + redux)[todo] ...
react-redux的美团点餐加购物车案例
10-27
这可能涉及到更复杂的Redux中间件如`redux-thunk`或`redux-saga`来处理异步操作，如向服务器请求更多菜品数据。 最后，确保应用具有良好的可测试性是关键。我们可以利用Jest和Enzyme这样的测试库，编写单元测试和...
create-react-redux-app：基于create-react-app的React样板
02-05
创建React Redux应用 该项目是通过。 该项目包括额外的redux软件包和改进的文件结构。...git clone git@github.com:YUzhva/create-react-redux-app.git NEW_PROJECT_NAME # with HTTPS git clone https://g
React React-Redux的安装，使用
datouniao1的博客
03-01 2257
本人第react-redux 小白一个，如果你是大佬，路过即可 其实在使用redux 之前，我并不了解redux 的作用，我在编写react的过程中遇到一个登录的问题 在不断的使用React的过程中，我们在一个页面上使用多个组件 比如一个首页----组成可能如下： <CHeader></CHeader> <Content></Content> <CFooter></CFooter> 我们在CHeader 中有一个登录的功能，
使用 Redux 管理 React 应用状态：从安装到实战应用完全指南
weixin_46029529的博客
05-23 219
Redux 是 JavaScript 应用程序中最流行的状态管理工具之一。它通过创建一个单一的应用程序状态存储，简化了应用程序状态和数据的管理。Redux 可以与 React 结合使用，以一种统一的方式构建应用程序并管理其状态。在本文中，我们介绍了 Redux 的基础知识，包括如何创建 Redux 存储、Reducer、Action 和中间件。我们还介绍了如何在应用程序中结合使用 React-Redux，并如何将 Redux 状态映射到 React 组件中。
React（react18）中组件通信04——redux入门
@素素~的博客
09-20 660
React（react18）中组件通信04——redux入门
react状态管理(redux,mobx)的安装及使用。
CCKing7的博客
03-21 437
注: 如果状态数据更新,视图没刷新, 且没报错, 可能是mobx和mobx-react版本不匹配, 注意版本 "mobx": "^5.15.4", "mobx-react": "^6.3.1"7, 在使用状态管理的组件中导入inject(注入)函数和observer(观察者)函数, 都是高阶组件。6, 在入口文件index.js中,使用Provider 包裹App根组件, 并设置store。8, 在入口文件index.js中,使用Provider 包裹App根组件, 并设置store。
React-安装和配置redux调试工具Redux DevTools
lmrylll的博客
06-24 394
chrome扩展程序里搜索Redux DevTools进行安装。新建store的时候，进行如下配置。
reactjs教程：安装Redux库及Redux入门示例
学亮编程手记
12-02 429
以上示例展示了Redux的基本工作流程。通过定义初始状态、动作类型和Reducer函数，创建Redux store，并使用。方法订阅状态的变化。这样，Redux就可以管理应用程序的状态，并提供可预测和可控制的数据流。方法派发动作来更新状态。方法可以获取当前状态，并通过。
redux的介绍、安装、三大核心与执行流程
Gik99的博客
08-19 389
redux的介绍、安装、三大核心与执行流程
react-redux安装
最新发布
06-12
React-Redux是一个结合了React和Redux的库，它使得在React应用中集成状态管理变得更加容易。Redux是一个单一来源的状态管理库，而React-Redux提供了一组工具来帮助你将Redux的状态管理与React组件结合起来。 安装React-Redux的步骤通常是这样的： 1. 首先，确保你已经安装了Node.js和npm（Node包管理器）。 2. 在你的项目目录中，打开终端或命令提示符。 3. 使用npm或yarn来安装`react-redux`和`redux`库。如果你还没有安装`redux`，可以先安装： ```bash npm install redux ``` 或者使用yarn： ```bash yarn add redux ``` 4. 安装`react-redux`： ```bash npm install react-redux ``` 或者： ```bash yarn add react-redux ``` 5. 引入到你的项目中。通常会创建一个store来保存全局状态，以及将store连接到React组件上： ```javascript // 在index.js或App.js中 import { createStore } from 'redux'; import rootReducer from './reducers'; // 根 reducer，合并所有模块的reducer const store = createStore(rootReducer); // 如果你在使用react-redux，还需要引入Provider组件： import { Provider } from 'react-redux'; import App from './App'; // 你的React应用组件 function Root() { return ( <Provider store={store}> <App /> </Provider> ); } ReactDOM.render(<Root />, document.getElementById('root')); ``` 6. 在React组件中，使用`connect`函数从store中提取数据并处理dispatch动作： ```javascript import { useSelector, useDispatch } from 'react-redux'; function MyComponent() { const myState = useSelector(state => state.mySlice); // 选择store中的状态 const dispatch = useDispatch(); // 获取dispatch方法 // 在组件内部使用state和dispatch // ... } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值