【React】使用react-redux编写counter应用（优化后）

继续根据上一篇博文中提出的问题进行优化：https://blog.csdn.net/zqq_2016/article/details/109227761

1. 下载依赖包

cnpm i --save redux react-redux

cnpm i --save redux-thunk  //redux插件（异步中间价），用来写异步代码

2. action-types.js

/*
 * 包含所有的action type的常量字符串
 */
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

3. reducers.js

import {DECREMENT, INCREMENT} from "../redux_counter_u/action-types";

export function counter(state = 0, action) {
    switch (action.type) {
        case INCREMENT:
            return state + action.data
        case DECREMENT:
            return state - action.data
        default:
            return state
    }
}

4. actions.js

import {DECREMENT, INCREMENT} from "../redux_counter_u/action-types";
//增加
export const increment = number => ({
    type: INCREMENT,
    data: number
})
//减少
export const decrement = number => ({
    type: DECREMENT,
    data: number
})
//异步（返回一个函数）
export const incrementAsync = number => {
    return dispatch => {
        // 异步代码
        setTimeout(() => {
            // 1s后才去分发一个增加的action
            dispatch(increment(number))
        }, 1000)
    }
}

5. store.js

import {createStore, applyMiddleware} from "redux";
import {counter} from './reducers'
import thunk from 'redux-thunk'

const store = createStore(counter, applyMiddleware(thunk)) //应用上异步中间件

export default store

6. containers/app.js

import Counter from "../components/react_ui/react_redux_counter/counter";
import {connect} from 'react-redux'
import {increment, decrement, incrementAsync} from "../redux/react_redux_counter_u/actions";

export default connect(
    state => ({count: state}),
    {increment, decrement, incrementAsync}
)(Counter)

7. components/react_ui/react_redux_conter/counter.js

import React, {Component} from 'react';
import PropTypes from "prop-types";

class Counter extends Component {
    // 接收3个属性
    static propTypes = {
        count: PropTypes.number.isRequired,
        increment: PropTypes.func.isRequired,
        decrement: PropTypes.func.isRequired,
        incrementAsync: PropTypes.func.isRequired
    }
    // 增加
    increment = () => {
        const number = this.select.value * 1
        // const {count} = this.state
        // this.setState({count: count + number})
        // 调用store的方法更新状态
        this.props.increment(number)
    }
    // 减少
    decrement = () => {
        const number = this.select.value * 1
        // const count = this.props.store.getState()
        // this.setState({count: count - number})
        this.props.decrement(number)
    }
    // 偶数增加（满足条件后再增加）
    incrementIfOdd = () => {
        const number = this.select.value * 1
        const {count} = this.props
        if (count % 2 === 1) {
            // this.setState({count: count + number})
            this.props.increment(number)
        } else {
            alert(`${count}不是奇数呦！`)
        }
    }

    // 异步增加（设置延时定时器）
    incrementAsync = () => {
        const number = this.select.value * 1
        this.props.incrementAsync(number)
    }

    render() {
        // const {count} = this.state
        // 得到原本的count状态
        const {count} = this.props
        console.log("App", count)
        return (
            <div>
                <p>click {count} times</p>
                <div>
                    <select ref={select => this.select = select}>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                    <button onClick={this.increment}>+</button>
                    <button onClick={this.decrement}>-</button>
                    <button onClick={this.incrementIfOdd}>increment if odd</button>
                    <button onClick={this.incrementAsync}>increment async</button>
                </div>
            </div>
        );
    }
}

export default Counter;

8. index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../src/containers/app'
import {Provider} from 'react-redux';
import store from "./redux/react_redux_counter_u/store";

ReactDOM.render((
        <Provider store={store}>
            <App/>
        </Provider>)
    ,
    document.getElementById('root')
);

9. 效果图