React-redux库的使用

最新推荐文章于 2024-09-20 07:59:56 发布
最新推荐文章于 2024-09-20 07:59:56 发布
阅读量662 收藏
点赞数 1
分类专栏： react 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hx_programmer/article/details/121341794
版权

为什么要使用React-redux

  1. 每个组件都需要单独导入store

  2. 在根组件上的写法不友好

什么是react-redux

是 Redux 官方提供的 React 绑定库

  1. React 和 Redux 是两个独立的库，两者之间职责独立。

  2. Redux可以和其他的js库，框架一起使用，而并不专门用于react。

  3. 为了实现在 React 中使用 Redux 进行状态管理 ，就需要一种机制，将这两个独立的库关联在一起。这时候就用到 React-Redux 这个绑定库了

  4. 作用: 为 React 接入 Redux，实现在 React 中使用 Redux 进行状态管理。

react-redux-基本使用

1.步骤

  1. 安装 npm i react-redux

  2. 使用

    1. 按上一篇文章的要求，创建好store, reducer,action等等

    2. 从react-redux中引入 provider, useSelector, useDispatch来 操作 redux

2.API

Provider

  • 用法：直接包装在根组件上。<Provider store={store}>

  • 好处：相比react + redux，这样就不需要每个组件都引入store了

useSelector

  • 用法：获取公共状态

  • 好处：

    • 相比react + redux，不需要使用store.getState()了

    • state变化了，它会自动更新

  • 格式：const 状态 = useSelector(store的数据 => 你需要的部分)

useDispatch

  • 用法：派发action，修改数据

  • 格式： const dispatch = useDispatch(); dispatch(action)

hx_programmer
关注
专栏目录
面试 - react-redux插件库的基本使用
xiannverhaha的博客
08-26 213
1）容器组件 ------ connect(mapStateToProps,mapDispatchToProps)(CountUI)在UI组件中就可以用 props 接收状态；并且不需要再检测组件处是否重新渲染，connect 会根据状态的改变，自动渲染组件。（2）.使用connect()()创建并暴露一个Count的容器组件，来链接UI组件和Redux（store）；react-redux作用？.....................
React-redux使用教程
xm1037782843的博客
10-30 2881
react-redux,Redux 是 JavaScript 应用的状态容器
react-redux库
weixin_45678402的博客
06-08 167
安装react-redux tnpm i react-redux 未优化前： —— src/components/Count/index.tsx import React, { useState } from 'react' export default function CountUI(props:any) { console.log('UI组件接收到的props是', props) const [value, setValue] = useState<number>.
react状态管理的库———redux
weixin_46156304的博客
04-23 380
今天去吃饭的时候，一个挺帅的小哥哥找我v来着，啊啊啊，好尴尬啊！！！但是马上就要就业了，压力好大，只想学习，没有给他，好可惜。 学习文档 1.英文文档: https://redux.js.org/ 2.中文文档: http://www.redux.org.cn/ 3.Github: https://github.com/reactjs/redux redux是什么 1.redux是一个专门用于做状态管理的JS库(不是react插件库)。 2.它可以用在react, angular, vue等项目中, 但.
【react框架】告别过去，现在的react-redux状态管理库既好理解又好用！
庞囧的博客
08-07 993
React的状态管理库一开始是个第三方库，叫做Redux。后来Facebook发现这个库的使用量很大，于是官方就也出了个功能一样的库叫做react-redux。这就是原本Redux和react-redux的关系。我之前使用过类组件时期的Redux、函数组件初期的Redux，发现都特别难用，哪些简化Redux理解和操作的第三方库也不是那么好用。对应的调试工具还是类似vsconsole那种入侵代码的库。整体和当时的VueX对比，使用体验还是差很多的。
React前端框架技术集 React+Redux
08-12
React是一个用于构建用户界面的 JavaScript 库。起源于 Facebook 的内部项目，并与2013年5月开源。React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它
react-redux基本使用
努力下来就凸头
10-24 1888
react-redux操作
React - Redux Hooks的使用细节详解
热门推荐
m0_71485750的博客
10-31 1万+
在之前的redux开发中，为了让组件和redux结合起来，我们使用了react-redux库中的connect:但是这种方式必须使用高阶函数结合返回的高阶组件;并且必须编写:mapStateToProps和 mapDispatchToProps映射的函数, 具体使用方式在前面文章有讲解;在Redux7.1开始，提供了Hook的方式，在函数组件中再也不需要编写connect以及对应的映射函数了的作用是将state映射到组件中:参数一: 要求传入一个回调函数, 会将state传递到该回调函数中;
React - redux 使用（由浅入深）
技术共享，共同进步！
12-06 6839
React - redux 使用（由浅入深）
React中使用 react-toolkit和react-redux 创建redux仓库（一）
weixin_46022934的博客
04-03 1325
系列文章目录 前言 一、第一步：安装reduxjs/toolkit和react-redux 1. 创建一个react项目 2.执行下面的npm命令 npm命令代码如下： 检查依赖安装是否success 二、第二步：创建仓库 1.创建仓库的具体流程如下 2.创建文件结构（可根据自己认识创建文件） 3.创建一个Promise模拟network（mockUserInfoFetchData.js） 代码如下(这里就不做code解释了) 4.createSlice创建reducer并导出Action和reducer（
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-redux-promise-example:使用react-redux和redux-promise的非常基本的示例
04-30
使用react-redux和redux-promise的非常基本的示例 To Start the Application Run server - go to server repo - run npm install - node index.js In main app - run npm install - npm start 当promise得到解决时...
react-react-redux：使用React Hooks和Proxy的React Redux绑定
02-05
react-react-redux v5-alpha（此存储库）：具有useMutableSource的实验性react-redux绑定。 它提供了useTrackedState，它可以跟踪render中状态的使用，它最初是在此repo中提出的。 ：该项目将为useTrackedState...
react-redux-demo:react-redux实现组件通信实例
05-17
本项目“react-redux-demo”提供了一个实际的案例，展示了如何将这两者结合使用来实现组件之间的通信。现在，我们将深入探讨这些知识点。 React是Facebook开发的一个用于构建用户界面的JavaScript库，它提倡使用...
详解react、redux、react-redux之间的关系
08-27
React、Redux 和 React-Redux 是前端开发中常用的三个库，它们各自扮演着不同的角色，并且在复杂的前端应用中常被组合使用。这篇文章将详细解析这三个库之间的关系。 React 是一个用于构建用户界面的 JavaScript 库...
React×Redux——react-redux库connect()方法与Provider组件
尐轩web前端网络日志
02-05 7887
在写Redux的时候我们就了解了 如果使用Redux的话配合React是最好的 Dan Abramov为此还特意封装了一个react-redux库来提供便利概念一旦我们选择使用了这个react-redux库 那么我们的组件概念就要加以区分了 从现在起我们的组件分为展示组件和容器组件两种 （参考了通俗易懂的阮大神博客）展示组件展示组件（presentational component） 也
TS React 项目中使用TypeScript
小白小白从不日别的博客
09-18 1519
消息: {this.props.msg}定义复杂数据类型后，可以导出数据类型方便其他组件引入使用。state = {}render() {return (消息: {this.props.msg}姓名：{this.props.user.name}年龄：{this.props.user.age}
react hooks--useMemo
最新发布
小白小白从不日别的博客
09-20 338
相当于计算属性!!!useMemo实际的目的也是为了进行性能的优化。◼ 如何进行性能的优化呢？ useMemo返回的也是一个 memoized（记忆的） 值； 在依赖不变的情况下，多次定义的时候，返回的值是相同的；return this.state.name + '计算属性'render() {相较于 useCallback 而言，useMemo 的收益是显而易见的。useMemo 建议适当使用如果没有使用 useMemo，会在每一次渲染的时候执行。如果使用了useMemo，只有在a。
ACE之ACE_Reactor_Notify
多看多听多总结
09-14 872
ACE_Reactor_Notify作为Reactor的实现类ACE_Reactor_Impl内部通知来唤醒eventloop。
描述react-redux的使用方法
06-11
React-Redux 是为了更方便地在 React 应用中使用 Redux 而创建的一个库。它提供了一些 API，可以让 Redux 的 store 和 React 组件之间更容易地进行连接。下面是 React-Redux 的使用方法： 1. 安装 React-Redux 首先，需要安装 React-Redux 库。在命令行中输入以下命令： ``` npm install react-redux ``` 2. 创建 Store 在应用中创建 Redux 的 store，可以使用 Redux 的 createStore 函数来创建，如下所示： ``` import { createStore } from 'redux'; import rootReducer from './reducers'; const store = createStore(rootReducer); ``` 3. Provider 组件 使用 React-Redux 提供的 Provider 组件将 store 传递给应用的所有组件。在应用的入口文件中，将 App 组件包裹在 Provider 组件中，如下所示： ``` import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import store from './store'; import App from './App'; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); ``` 4. connect 函数 使用 React-Redux 提供的 connect 函数将组件连接到 store 上，使其能够读取和修改 store 中的状态。connect 函数接受两个参数：mapStateToProps 和 mapDispatchToProps。mapStateToProps 是一个函数，它将 store 中的状态映射到组件的 props 中。mapDispatchToProps 是一个函数，它将 store 的 dispatch 方法映射到组件的 props 中，使组件能够触发 action。下面是一个使用 connect 函数的示例： ``` import React from 'react'; import { connect } from 'react-redux'; class MyComponent extends React.Component { render() { return ( <div> <h1>{this.props.count}</h1> <button onClick={this.props.increment}>Increment</button> </div> ); } } const mapStateToProps = state => { return { count: state.count }; }; const mapDispatchToProps = dispatch => { return { increment: () => dispatch({ type: 'INCREMENT' }) }; }; export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); ``` 在上面的代码中，connect 函数将 MyComponent 组件连接到 store 上，并将 count 属性和 increment 方法映射到组件的 props 中。这样，MyComponent 组件就能够读取和修改 store 中的状态了。 以上就是使用 React-Redux 的基本方法。通过 Provider 和 connect 这两个 API，我们可以更方便地在 React 应用中使用 Redux。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值