react 的组件之间的通信问题 (相当于vue中vuex)

index,js中

  1. 下载 yarn add react-redux 和redux
引入 import { **createStore**} from 'redux'
	引入import { **Provider** } from 'react-redux'
  1.  const *initState* = {
     		a:1,
     		b:2
     	 }
    
  2.  const *reducer* =(state,action)=>{
     		let { 传递的参数对象} =action
     		let newstate={...state}    //建议解构出来用新的
     		newstate.a=传递的参数
     		return  newstate
     	}
    
const store = createStore(reducer,initState)
  1. <Provider store={store}> <App> </Provider>

在任意的组件中使用或者修改全局数据。。
1.import {**connect**} from 'react-redux'
2.

const *mapStateToProps* =(state,ownProps)=>{
	return {
		**a:state.a,**
		b:state.b
	}

}
3.

const   *mapDispatchToProps*   = (dispatch.ownProps) => {
	// 想当于传实参参数
	**let ownaction = {              
		type:"del",
		id:2,
	}**
	return {
		**fn(){
				dispatch(ownaction)
			}**
	}
}

4.导出

export default  **connect** (*mapStateToProps*,  *mapDispatchToProps*)(组件名)

组件中使用数据: this.props.a
在组件中修改数据: this.props.fn()

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值