react之redux的使用

这是上篇redux简单介绍及写法redux简单使用，
场景：我们实际项目开发中可能需要多个通知，比如购物车一个数量的通知，个人信息变化的通知，那么如果写的。

主要思路其实就是在入口组件，将多个通知储存合并一下就好了，具体代码示例如：

//这行代码用来创建储存，储存多个取值
let reducers = combineReducers({
    //用来计数的存储
    counterReducer: addReduce,
    //用来获取个人信息的储存
    personReducer: getPerson
});

然后取值组件的代码就需要更具那个key：personReducer

render() {
        return (
            <div>
                {/*这里就得根据储存器的key来获取值了*/}
                姓名：{this.props.state.personReducer.pName}<br/>
                性别：{this.props.state.personReducer.pSex}<br/>
                年龄：{this.props.state.personReducer.pAge}<br/>
            </div>
        )
    }

下面是全部代码：
入口组件：

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 = {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 personState = {
    pName: '姓名',
    pSex: '性别',
    pAge: '年龄'
};

//获取个人信息
function getPerson(state = personState, action) {
    console.log(action);
    switch (action.type) {
        case "person":
            return {pName: action.name, pSex: action.sex, pAge: action.age};
        default:
            return state;
    }
}


//这行代码用来创建储存，储存多个取值
let reducers = combineReducers({
    //用来计数的存储
    counterReducer: addReduce,
    //用来获取个人信息的储存
    personReducer: getPerson
});
let store = createStore(reducers);

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 CounterComponent from './counter'
import {connect} from 'react-redux';

class PersonComponent extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            name: "",
            sex: "",
            age: 0
        }

    }

    getName(e) {
        this.setState({
            name: e.target.value
        });
    }

    getSex(e) {
        this.setState({
            sex: e.target.value
        });
    }

    getAge(e) {
        this.setState({
            age: e.target.value
        });

    }

    render() {
        return (
            <div>
                姓名：<input onChange={this.getName.bind(this)}/><br/>
                性别：<input onChange={this.getSex.bind(this)}/><br/>
                年龄：<input onChange={this.getAge.bind(this)}/><br/>
                <button onClick={()=>{
                    this.props.dispatch({type: 'person', name: this.state.name, sex: this.state.sex, age: this.state.age});
                }}>储存</button>
            </div>
        )
    }
}

export default connect((state) => {
    return {
        state: state
    }
})(PersonComponent)

个人信息取值：

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

class PersonMsgComponent extends React.Component {
    render() {
        return (
            <div>
                {/*这里就得根据储存器的key来获取值了*/}
                姓名：{this.props.state.personReducer.pName}<br/>
                性别：{this.props.state.personReducer.pSex}<br/>
                年龄：{this.props.state.personReducer.pAge}<br/>
            </div>
        )
    }
}

export default connect((state) => {
    return {
        state: state
    }
})(PersonMsgComponent)

计数器赋值：

import React from 'react';
import CounterComponent from './counter'
import {connect} from 'react-redux';
import PersonComponent from "./person";
import PersonMsgComponent from './PersonMsg';

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.counterReducer.amount}</div>
                <div>
                    <button onClick={this.btnAdd.bind(this)}>+</button>
                    &nbsp;&nbsp;
                    <button onClick={this.btnReduce.bind(this)}>-</button>
                </div>
                <hr/>
                <div>输入个人信息：</div>
                <PersonComponent/>
                <div>获取个人信息：</div>
                <PersonMsgComponent/>
            </div>
        )
    }
}

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

计数器取值

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

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