react-redux的详细介绍及使用

 

 

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())}

    }
}

结尾：

陌生到熟悉，最终搞定了！