概述
react-redux是redux官方出的,用于配合react的绑定库,它能够使你的react组件从redux store中很方便的读取数据,并且向store中分发actions,以此来更新数据,它有两个很重要的成员:Provider、connect:
Provider
connect
小案例解说
案例需求: 一个按钮,点击加1,下方显示数字,默认0
案例思路:
- 项目中下载redux、react-redux
- 新建两个组件(ComA、ComB)
- 新建store文件和reducer文件
- 然后用react-redux中的Provider组件包裹app.js,并传入全局store(这点很重要)
- 然后用react-redux中的connect函数来加强刚自定义组件ComA、ComB
代码:
app.js文件
import React from 'react';
import ComA from "./pages/ComA";
import ComB from "./pages/ComB";
import {Provider} from 'react-redux'
import store from './store/store.js'
function App() {
return (
<Provider store={store}> //这里的全局store千万不能忘记传
<div>
<ComA />
<ComB />
</div>
</Provider>
);
}
export default App;
reducer.js文件
const initState={
value:0
};
exports.reducer=(state=initState,action)=>{
console.log(action,'action');
if (action.type === 'add') {
return {
value:state.value+1 //注意这里返回的state是一个对象
}
} else {
return state
}
}
store.js文件
import {createStore} from 'redux'
import {reducer} from '../reducer'
export default createStore(reducer);
ComA.js
import React from "react";
import {connect} from 'react-redux'
class ComA extends React.Component{
add=()=>{
this.props.dispatch({type:'add'})
};
render() {
return(
<button onClick={this.add}> + </button>
)
}
}
const mapDispatchToProps =(dispatch)=>{ //mapDispatchToProps函数返回一个对象,别写错了,这 里可以直接把dispatch方法返回,它也可以自定义封装一 些函数,比如updateState,像下面那样写法
return {
dispatch
};
return {
updateState(){
dispatch({
type:'add'
})
}
}
};
export default connect(null,mapDispatchToProps)(ComA)
ComB.js文件
import React from "react";
import {connect} from 'react-redux'
class ComB extends React.Component{
render() {
return(
<div>{this.props.value}</div>
)
}
}
const mapStateToProps=(state)=>{
return state;
};
export default connect(mapStateToProps,null)(ComB)