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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React 组件中的state和setState()你知道多少
这篇文章主要为大家详细介绍了React组件中的state和setState()，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
ReactNative列表ListView的用法
本篇文章主要介绍了ReactNative列表ListView的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
React项目中使用zustand状态管理的实现
zustand是一个用于状态管理的小巧而强大的库,本文主要介绍了React项目中使用zustand状态管理的实现,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10
一文详解React组件API
这篇文章主要介绍了React的组件API，及组件API的用法详解，文中有详细的代码示例，对学习或工作有一定的参考价值，感兴趣的同学可以阅读本文
2023-04-04
React实现二级联动(左右联动)
这篇文章主要为大家详细介绍了React实现二级联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
深入理解React调度(Scheduler)原理
本文主要介绍了深入理解React调度(Scheduler)原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
react如何利用useRef、forwardRef、useImperativeHandle获取并处理dom
这篇文章主要介绍了react如何利用useRef、forwardRef、useImperativeHandle获取并处理dom,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-10-10
记录一次完整的react hooks实践
这篇文章主要介绍了记录一次完整的react hooks实践，通过一个简单示例，介绍了react hooks，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-03-03
React-Native左右联动List的示例代码
本篇文章主要介绍了React-Native左右联动List的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
React Fiber构建completeWork源码解析
这篇文章主要为大家介绍了React Fiber构建completeWork源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02