三分钟看完React-redux
React-redux概述
React与redux的关系
redux与react没有直接关系
。redux支持react,angular,jquery等库,只是redux与react搭配更加好用。
React-redux
React-Redux
是 Redux 的官方 React 绑定库。
React-Redux
能够使React组件从Redux store中读取数据,并且向 store 分发 actions 以更新数据。
React-Redux
并不是 Redux 内置,需要单独安装。
React-Redux
一般会和 Redux 结合一起使用。
React-redux中两个重要成员
Provider组件
Provider
组件能够使整个程序都能获取到store中的数据。
Provider
组件包裹在根组价最外层,使所有的子组件都可以拿到State。
Provider
接收store作为props,然后通过context往下传递,这样react中的任何组件都可以通过context获取store。
connect方法
这个方法能够使组件和store
进行关联。
Provider
内部组件如果想要使用state中的数据就必须要connext进行一层包装封装,换句话说就是必须要被connect进行加强。
connect
就是方便我们组件能够获取到store中的state。
React-redux的基本使用
安装redux、react-redux
react-redux不是react官方所提供的,所以需要进行安装react-redux
。
react-redux还需要依赖Redux中的store,所以还需要安装redux
。
npm install redux
npm install react-redux
创建两个组件ComA为一个button按钮
import React from "react";
class ComA extends React.Component{
render() {
return(
<button> + </button>
)
}
}
创建组件ComB是一个显示区
import React from "react";
class ComB extends React.Component{
render() {
return(
<div>1</div>
)
}
}
在App.js中引入组件A和组件B
import React from "react";
//导入组件A
import ComA from "../pages/ComA/ComA";
//导入组件B
import ComB from "../pages/ComB/ComB";
function App(){
return (
<div>
<ComA/>
<ComB/>
</div>
)
}
export default App;
创建reducer
exports.reducer = (state,action)=>{
return state
}
创建store
import {createStore} from "redux";
//导入reducer处理函数
import {reducer} from '../Reducer/Reducer'
const store = createStore(reducer)
export default store;
Provider的使用
❶在app.js中导入Provider组件,从react-redux中导入。
❷利用Provider组件对我们整个组件进行包裹。
❸给Provider组件设置store属性,store的属性值为createStore创建出来的实例store。
import React from "react";
//导入Provider组件,利用组件包裹结构,维护store
import {Provider} from "react-redux";
//导入store
import store from "../Store/Store";
//导入组件A
import ComA from "../pages/ComA/ComA";
//导入组件B
import ComB from "../pages/ComB/ComB";
function App(){
return (
<Provider store={store}>
<div>
<ComA/>
<ComB/>
</div>
</Provider>
)
}
export default App;
connect的使用
导入connext方法
import { connect } from "react-redux";
调用connect方法
connect(...)(Component)
connect方法会有一个返回值,而这个返回值就是加强后的组件
connect参数说明
参数名 | 类型 | 说明 |
---|---|---|
mapStateToProps(state,ownProps) | Function | 这个函数允许我们将state中的数据作为props绑定到组件上 state:redux中的store ownProps:自己的props |
mapDispatchToProps(dispatch,ownProps) | Function | 将action作为props绑定到我们自己的函数中 dispatch:就是store.dispatch() ownProps:自己的props |
mergeProps(stateProps,dispatchProps,ownProps) | Function | 不管是stateProps还是disoatchProps,都需要和ownProps merge之后才会被赋给组件,通常情况下可以不传这个参数,connect会使用Object.assifn替代这个方法 |
options | Object | 可以制定connector的行为 |
组件A发送Action
❶导入
connect
❷利用connect对组件进行加强,connect的第一个参数是要接收数组的函数,第二个参数是要发送Action的函数。最后一个括号是要加强的组件。也就是connect(要接收数组的函数,要发送Action的函数)(要放入加强的组件)
。
❸组件A是发送Action
,即实现第二个参数
❹构建函数,mapDispathtoProps(dispatch),dispatch用来发送Action。
在mapDispathtoProps(dispatch)中返回一个对象,key是方法名,value调用dispatch去发送Action。
❺在组件的内部就可以通过this.props
拿到key方法了。
import React from "react";
//导入connect
import {connect} from "react-redux";
class ComA extends React.Component{
Click = () =>{
console.log('ComA',this.props)
//发送Action
this.props.sendAction()
}
render() {
return(
<button onClick={this.Click}> + </button>
)
}
}
const mapDispathtoProps = (dispatch)=>{
return{
sendAction:()=>{
//利用dispatch发送Action
//Action对象需要有type属性
dispatch({
type:'add_type'
})
}
}
}
//组件A为发送方,需要实现connect第二个参数
export default connect(null,mapDispathtoProps)(ComA);
组件B实现接收
❶导入connect
❷利用connect对组件进行加强。
❸组件B是接收方,需要实现connect的第一个参数mapStateToProps
❹mapStateToProps里的第一个参数就是我们需要的state
。
❺需要将state返回才能在组件内部获取到最新的数据
❻comB能否拿到数据关键在于reducer,只有reducer里面返回了新的state
的时候,我们才能获取到数据。
import React from "react";
//导入connect
import { connect } from "react-redux";
class ComB extends React.Component{
render() {
console.log('ComB', this.props)
return(
<div>{this.props.count}</div>
)
}
}
const mapStateToProps = (state) =>{
console.log('ComB',state);
return state;
}
//组件B接收,需要实现第一个参数
export default connect(mapStateToProps)(ComB);
reducer接收Action,然后进行逻辑处理
//reducer要接收Action然后进行逻辑处理
const initState = {//初始值
count:0
}
exports.reducer = (state = initState,action)=>{
console.log('reducer',action);
switch (action.type){
case 'add_type':
return{
count: state.count+1
}
default:
return state
}
}
结果展示
数据传递流程
小结
安装相关的依赖
构建store和reducer
搭建页面结构
Provider组件的实现
connect方法的实现(发送和接收)