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

 目录结构：

  src/index.js

  src/App.js

      redux/action-types.js

      redux/actions.js

      redux/reducers.js

      redux/store.js

1. 下载redux依赖包

cnpm i --save redux

 2. action-types.js

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

 3. actions.js

import {DECREMENT, INCREMENT} from "./action-types";
/*
 * 包含所有的action creator
 */
export const increment = number => ({
    type: INCREMENT,
    data: number
})
export const decrement = number => ({
    type: DECREMENT,
    data: number
})

4. reducers.js

/*
 * 包含多个reducer函数的模块
 */
import {DECREMENT, INCREMENT} from "./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
    }
}

5. store.js

import {createStore} from "redux";
import {counter} from "./reducers";

//生成一个store对象
const store = createStore(counter)
console.log(store, store.getState())
export default store

6. App.js

import React, {Component} from 'react';
// import {decrement, increment} from "./redux/react_redux_counter/actions";
import * as actions from './redux/react_redux_counter/actions'

//非受控组件select的使用
class App extends Component {

    // 增加
    increment = () => {
        const number = this.select.value * 1
        // const {count} = this.state
        // this.setState({count: count + number})
        // 调用store的方法更新状态
        this.props.store.dispatch(actions.increment(number))
    }
    // 减少
    decrement = () => {
        const number = this.select.value * 1
        // const count = this.props.store.getState()
        // this.setState({count: count - number})
        this.props.store.dispatch(actions.decrement(number))
    }
    // 偶数增加（满足条件后再增加）
    incrementIfOdd = () => {
        const number = this.select.value * 1
        const count = this.props.store.getState()
        if (count % 2 === 1) {
            // this.setState({count: count + number})
            this.props.store.dispatch(actions.increment(number))
        } else {
            alert(`${count}不是奇数呦！`)
        }
    }

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

    render() {
        // const {count} = this.state
        // 得到原本的count状态
        const count = this.props.store.getState()
        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 App;

7. index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App";

import store from "./redux/react_redux_counter/store";

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

// 初始化渲染
render()

//订阅监听（store中的状态变化了，就会自动调用进行重绘）
store.subscribe(render)

8. 效果图

9. 问题： 以上的代码还不是最优的

       1）redux与react组件的代码耦合度太高

       2）编码不够简洁 

  下一篇博客，结合react-redux编写counter应用~