redux的入门学习 使用react-redux

1:使用react-redux 简化的 页面端的使用   业务的分离的分离不会变  

2:减少store的引入 

3:简化state的调用  和  state修改的方法的使用   类似vuex中 mapState和mapMutation

 

第一步  安心  npm  i  react-redux 

第二步  引入和使用(全局配置)

在index.js中  Provider  类似 vue中 依赖注入

import  React  from  "react";
import  ReactDom  from  "react-dom";
import  App  from  "./App";
import   {Provider}  from  "react-redux";
import   store  from  "./store"


ReactDom.render(
<Provider store={store}>
<App></App>
</Provider>,

document.getElementById("root"))

第三步使用   (rcr)

import React, { Component } from 'react'
import  {connect} from  "react-redux"
 class Menu1 extends Component {
    constructor(props){
        super(props);
        
    }
    render() {
        return (
            <div>
                第一个页面 显示数据 {this.props.num}
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    num:state.numInfo.num
    
})

const mapDispatchToProps = {

}

export default connect(mapStateToProps, mapDispatchToProps)(Menu1)

 

 

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值