React-Redux使用
一、react-redux是什么?
Redux 官方提供的 React 绑定库。 具有高效且灵活的特性。简单的说就是redux很香,然后react的开发团队为了让他更香就弄个绑定库,使开发更加简单了
二、使用步骤
1.引入库
代码如下
yarn add react-redux
使用它之前需要先引入redux正式版
yarn add redux
2.核心对象
Provider 包裹根组件,为了让上下文都能接收到store
import { Provider } from 'react-redux'
包裹根组件
connect 为了增强组件,让他具备从store存取数据的能力
import { connect } from 'react-redux'
发起方
接收方
最后都传入reducer中,进行基础的校验处理
总结
提示:这里对文章进行总结:
个人理解,react-redux对redux进行了加强,省去了好多细节的操作,实现大体流程,
- 先在根元素用Privider进行包裹,目的是将store传递給每个子组件,让每个子组件都有获取store的能力
- 使用connect进行组件加强,使其拥有,改变仓库中的值,和获取操作中的值的能力
connect()()
第一个括号,两个重要的参数
1.mapStateToProps 用于获取仓库中的数据
const mapStateToProps = (state) => {
//console.log("ComB",state);
return state
}
2.mapDispatchToProps用于发送dispatch 来改变仓库中的数据
const mapDispatchToProp=dispatch=>{
//通过dispatch发送action
return{
addAction:()=>{
dispatch({
type:'ADD_ACTION'
})
}
}
}
3.发起方通过connect内部的dispatch,将其带到组件内部通过prop进行调用发送action经过reducer达到数据修改的目的