React-redux

概述

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)

流程图总结