react-redux的基本使用
更新时间：2022年08月12日 10:13:07 作者：是张鱼小丸子鸭
react-redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，这篇文章主要介绍了react-redux使用,需要的朋友可以参考下
react-redux和redux的关系？
redux是react中进行状态管理的js库（不是react插件），一般是管理多个组件中共享数据状态，和vue中的vuex是一样的
react-redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，说白了就是用于连接redux，它提供了connect和Provider两个Api
react-redux基本使用
1.安装
npm i react-redux@7 --save
尽量安装8.0以下的版本，8.0以上会报错，无法使用connect方法，提示hooks错误，provider也无法使用
2.配置
首先，我们在入口文件中配置react-redux的Provider方法，绑定store的redux对象数据
//导入react-redux的provier的组件
import { Provider } from "react-redux"
//...other
root.render(
<Provider store={store}>
<Routes />
</Provider>
);注意：Provider的store参数必须写，如果不写，他会报错，他的原理跟我们使用context状态树中给provider传递的value值一样
3.组件中使用
在我们要使用的组件中尝试连接react-redux连接redux的数据
使用步骤
- 导入react-redux依赖包，引入connect方法
- connect有两个函数参数，mapStateToProps和mapDispatchToProps
- 把redux中state数据和action方法直接映射到组件props属性中去
- 组件中可以直接通过props使用redux中的数据，调用方法直接调用redux中的action的数据
- connect（ mapStateToProps，mapDispatchToProps）(组件名)
代码展示
import React from 'react';
import { connect } from 'react-redux';
export default function ReactRedux(props) {
console.log(props);
return (
<div>
<h3>react-redux</h3>
</div>
)
}
/把redux中的state数据映射到组件内部的变量
const mapStateToProps=(state)=>{
console.log(state);
return {
...state
}
}
//把redux中action的操作，可以映射成为组件的props的内部函数
const mapDispathToProps=(dispatch)=>{
return {
plus:()=>dispatch({type:'PLUS'})
}
}
//连接redux的操作的方法
ReactRedux=connect(mapStateToProps,mapDispathToProps)(ReactRedux)connect方法执行完成以后绑定当前组件，复制完直接抛出即可
我们打印props中的数据会发现我们store中数据会作为props中属性给我们打印出来
这样，我们就可以使用props.属性/方法进行使用
到此这篇关于react-redux使用的文章就介绍到这了,更多相关react-redux使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
由于 create-react-app 使用 webpack 作为其模块打包器,你需要修改 webpack 的配置来支持 .less 文件,这篇文章主要介绍了在react配置使用less的完美方案,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了浅谈redux以及react-redux简单实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了react中使用css的7中方式(最全总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了详解使用React制作一个模态框，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
React使用useImperativeHandle自定义暴露给父组件的示例详解
useImperativeHandle 是 React 提供的一个自定义 Hook,用于在函数组件中显式地暴露给父组件特定实例的方法,本文将介绍 useImperativeHandle的基本用法、常见应用场景,需要的可以参考下2024-03-03
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
这篇文章主要介绍了如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了React拆分窗格组件的两种方法,使用第三方库react-split-pane适用于快速实现拆分窗格功能，并且对功能和样式的要求较为简单的场景，本文结合示例代码介绍的非常详细，需要的朋友可以参考下2023-07-07
本文主要介绍了深入理解React协调与调度(Scheduler)原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
这篇文章主要介绍了react 权限树形结构实现代码,项目背景react + ant design,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-05-05
本篇文章主要介绍了React Native自定义控件底部抽屉菜单的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
最新评论