react使用redux实现组件间的及时通讯简单用法

redux是一个插件
首先安装redux,先下命令npm install redux --save，然后再安装npm install react-redux --save
需求场景：加入购物车和购物篮数目是两个组件，当加入购物车加入一件商品，购物篮数目要立即加一。
解决办法：用本地缓存做的话有一个弊端，实现不了数量立即变化，而是要刷新一下组件，然后组件从本地储存获取值。而这时就需要我们的redux插件。
redux主要思路为：我们现在做一个计数的小demo

用redux实现的思路主要为下面（写法几乎都是固定一个模板）：

1. 在增加或者删除方法里面，定义一个或几个值，然后传到项目组件入口，通过下面的一行代码传送过去

//type是固定写法，用来标识是增加还是减少。amout是定义的一个局部变量，用来接收值。 this.number是本地变化的那个数
 this.props.dispatch({type: "add", amount: this.number});

但是会报dispatch找不到，所以需要让组件与redux关联起来

//让组件与redux关联起来
import {connect} from 'react-redux';
//IndexComponent是本组件，其他代码是固定写法
export default connect((state) => {
    return {
        state: state
    }
})(IndexComponent);

2. 然后在项目的入口来储存起来，然后通知给入口组件，相当于所有组件，我们在入口组件index来写代码

//这个方法用来获取值。amount：0,赋值默认的，刚一刷组件默认取的是amount的0
function addReduce(state = {amount: 0}, action) {
    console.log(action);
    switch (action.type) {
        case "add":
            return {amount: action.amount};
        case "reduce":
            return {amount: action.amount};
        //下面代码必须写
        default:
            return state;
    }
}
//这行代码用来创建储存，储存起来
let store = createStore(addReduce);
class Index extends React.Component {
    render() {
        return (
            //Provider 固定写法 ，store={store}传给各个组件
            <Provider store={store}><RouterComponent/></Provider>
        )
    }
}

3. 然后在取值的组件把值取过来

import React from 'react';
import {connect} from 'react-redux';
class CounterComponent extends React.Component {
    render() {
        return (
            //取到值
            <div>子组件counter计数器：{this.props.state.amount}</div>
        )
    }
}
//将redux与CounterComponent组件关联起来
export default connect((state) => {
        return {
            state: state
        }
    }
)(CounterComponent)

下面是完整代码：
赋值组件：

import React from 'react';
import CounterComponent from './counter'
import {connect} from 'react-redux';
class IndexComponent extends React.Component {
    constructor(props) {
        super(props);
        this.number = 0;
    }

    btnAdd() {
        this.number++;
        this.props.dispatch({type: "add", amount: this.number});
    }

    btnReduce() {
        this.number--;
        this.props.dispatch({type: "reduce", amount: this.number});
    }


    render() {
        return (
            <div>
                <CounterComponent/>
                <div>计数器：{this.props.state.amount}</div>
                <div>
                    <button onClick={this.btnAdd.bind(this)}>+</button>
                    &nbsp;&nbsp;
                    <button onClick={this.btnReduce.bind(this)}>-</button>
                </div>
            </div>
        )
    }
}

//让组件与redux关联起来
export default connect((state) => {
    return {
        state: state
    }
})(IndexComponent);

项目组件入口取值通知其他组件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import RouterComponent from './router';
import * as serviceWorker from './serviceWorker';
import {createStore, combineReducers} from 'redux';
import {Provider} from 'react-redux';
//这个方法用来获取值
function addReduce(state = {number: 0}, action) {
    console.log(action);
    switch (action.type) {
        case "add":
            return {amount: action.amount};
        case "reduce":
            return {amount: action.amount};
        //下面代码必须写
        default:
            return state;
    }
}

//这行代码用来创建储存，储存起来
let store = createStore(addReduce);

class Index extends React.Component {
    render() {
        return (
            //Provider 固定写法 ，store={store}传给各个组件
            <Provider store={store}><RouterComponent/></Provider>
        )

    }
}

ReactDOM.render(<Index/>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

取值组件取值

import React from 'react';
import {connect} from 'react-redux';

class CounterComponent extends React.Component {
    render() {
        return (
            //取到值
            <div>子组件counter计数器：{this.props.state.amount}</div>
        )
    }
}
//将redux与CounterComponent组件关联起来
export default connect((state) => {
        return {
            state: state
        }
    }
)(CounterComponent)