react-redux如何使用？

古城微笑少年丶 2022-12-11 15:11 178阅读 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 条评论，178人围观）

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

相关阅读

相关如何使用GitHub？

Github上如何给别人贡献代码(转) [http://www.cnblogs.com/chesterphp/p/3577924.html][http_www.cnblogs

谁借莪１个温暖的怀抱￠/ 2022年12月25日 06:51/ 0 赞/ 148 阅读

相关 kindeditor 如何使用

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

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

相关如何使用Instruments

[How to Use Instruments in Xcode][] 文章地址：[http://www.raywenderlich.com/23037/how-to-u

朱雀/ 2022年08月06日 14:15/ 0 赞/ 150 阅读

相关 sourcetree如何使用

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

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

相关 systrace如何使用

转　[http://blog.csdn.net/LAMP\_zy/article/details/53375521][http_blog.csdn.net_LAMP_zy_ar

缺乏、安全感/ 2022年05月30日 10:13/ 0 赞/ 174 阅读

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

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

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

相关如何使用Mybatis?

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

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

相关如何使用JWT

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

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

相关如何使用layui

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

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

相关如何使用@JsonFormat

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

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