react-redux简介:
React-Redux
是Redux
的官方React
绑定库。它能够使你的React
组件从Redux store
中读取数据,并且向store
分发actions
以更新数据
react-redux几个知识(Provider,connect,mapStateToProps,mapDispathToProps)
①:Provider是react-redux 提供的一个 React 组件。作用就是把 store 提供给其子组件。在其子组件下,都能访问到store的数据
import {createStore} from 'redux'
import {Provider} from 'react-redux'
const store=createStore(rootReducer);
<Provider store={store}>
<TestStore></TestStore>
</Provider>
②:connect是React-Redux
提供一个connect
方法能够让你把组件和store
连接起来。
import {connect} from 'react-redux'
class storeTest extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {}
}
//读取数据
const mapStateToProps=(state)=>{
console.log(state);
return{
counter:state
}
}
//进行触发action
const mapDispathToProps=(dispatch)=>{
return {
increatement:()=>{dispatch(increatement())},
decreate:()=>{dispatch(decreate())}
}
}
// connect将组件与store连接。connect里的参数顺序不能颠倒
export default connect(mapStateToProps,mapDispathToProps)(storeTest)
③:mapStateToProps函数:是读取store数据的,也可以实时监听数据的变化。
//读取数据(实时监控数据变化)
const mapStateToProps=(state)=>{
console.log(state);
return{
//将state的值给counter,页面通过this.props.counter获取
counter:state
}
}
④:mapDispathToProps函数:是用来触发action,操作store里的数据。
reduer:
const counter=(state=0,action)=>{
switch(action.type){
case "inCreateNum":
return state+action.num;
case "descment":
return state-action.num;
default:
return state;
}
}
export default counter
action的代码:
export function increatement(){
return{
type:"inCreateNum",
num:10
}
}
export function decreate(){
return{
type:"descment",
num:20
}
}
使用mapDispathToProps函数
//导入action
import {increatement,decreate} from '../actions/action.js'
//进行触发action
// increatement:()=>{dispatch(increatement())}的意思是将函数引用给increatement
//通过this.props.increatement调用
const mapDispathToProps=(dispatch)=>{
return {
increatement:()=>{dispatch(increatement())},
decreate:()=>{dispatch(decreate())}
}
}
结尾:
陌生到熟悉,最终搞定了!