react-redux如何使用？

古城微笑少年丶 2022-12-11 15:11 182阅读 0赞

安装

npm install react-redux --save

使⽤ **react-redux**

react-redux 提供了两个 api

1. Provider  为后代组件提供 store

2. connect  为组件提供数据和变更⽅法

全局提供 store ， index.js

import React from 'react'
    import ReactDom from 'react-dom'
    import App from './App'
    import store from './store/'
    import { Provider } from 'react-redux'
    ReactDom.render(
     <Provider store={store}>
     <App/>
     </Provider>,
     document.querySelector('#root') )

获取状态数据， ReactReduxPage.js

import React, { Component } from "react";
    import { connect } from "react-redux";
    class ReactReduxPage extends Component {
     render() {
     const { num, add, minus } = this.props;
     return (
       <div>
         <h1>ReactReduxPage</h1>
         <p>{num}</p>
         <button onClick={add}>add</button>
         <button onClick={minus}>minus</button>
       </div>
       );
     }
    }
    const mapStateToProps = state => {
     return {
       num: state,
     };
    };
    const mapDispatchToProps = {
     add: () => {
       return { type: "add" };
     },
     minus: () => {
       return { type: "minus" };
     }
    };
    export default connect(
     mapStateToProps, //状态映射 mapStateToProps
     mapDispatchToProps, //派发事件映射
    )(ReactReduxPage);

原文：视频讲解笔记

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关如何使用sass

文章目录前言使用编译器中sass插件的版本问题本地下载编译使用 -------------------- 前言最

Bertha 。/ 2022年09月03日 14:28/ 0 赞/ 222 阅读

相关 kindeditor 如何使用

简单使用方法 1. 解压文件，并把所有文件上传到您的网站程序目录下，例如：http://你的域名/editor/。 2. 要添加编辑器的页面头部添加以下代码，id为text

谁践踏了优雅/ 2022年08月27日 01:13/ 0 赞/ 185 阅读

相关 sourcetree如何使用

sourcetree是一个操作简单而且无需记住各种复杂git命令的快速管理分支软件。个人十分推荐。操作步骤：一、安装sourcetree 1.到官网下载最新版，不建议

本是古典何须时尚/ 2022年06月01日 04:43/ 0 赞/ 315 阅读

相关 PHPstorm如何使用Xdebug，postman如何使用xdebug

使用Xdebug原因：总是在代码里var\_dump和echo打断点测试很麻烦，每次测完了还要删除掉打印的代码再测试，于是我就想在PHPstorm里使用Xdebug做断点测试。

Myth丶恋晨/ 2022年04月10日 01:16/ 0 赞/ 499 阅读

相关 CleanMyMac如何使用

CleanMyMac如何使用？CleanMyMac的使用方法很简单，一般来说只要安装好CleanMyMac后，都会使用，但是今天小编还是要具体说说CleanMyMac如何使用？

古城微笑少年丶/ 2022年03月30日 05:48/ 0 赞/ 157 阅读

相关如何使用 KVM

原文地址：[http://tkg.im.ncue.edu.tw/?p=710][http_tkg.im.ncue.edu.tw_p_710] 如何使用 KVM 八月 23

àì夳堔傛蜴生んèń/ 2022年01月11日 18:15/ 0 赞/ 171 阅读

相关如何使用Mybatis?

一、 MyBatis的基本概念 Mybatis是一个持久层（dao）框架，提供了对数据库中数据的访问操作（CRUD） MyBatis解决的问题用来解决JDBC技术

深碍√TFBOYSˉ_/ 2021年12月11日 23:53/ 0 赞/ 233 阅读

相关如何使用JWT

参考博文：[https://www.jianshu.com/p/576dbf44b2ae][https_www.jianshu.com_p_576dbf44b2ae] 一、

我会带着你远行/ 2021年11月15日 13:56/ 0 赞/ 320 阅读

相关如何使用layui

原文地址 [https://blog.csdn.net/qq\_28379809/article/details/80098653][https_blog.csdn.net_q

- 日理万妓/ 2021年09月17日 03:36/ 0 赞/ 444 阅读

相关如何使用@JsonFormat

@JsonFormat的通常出现在javaBean中的属性上，用来表示json序列化的一种格式或者类型。比如： @JsonFormat(shape =Json...

朱雀/ 2020年10月25日 11:06/ 1 赞/ 1556 阅读