【React】简单使用redux编写counter应用（未优化前）

    redux编写的应用主要的目录包括src/index.js、src/App.js、redux/action-types.js、redux/reducers.js.

    注意：this.props.store.getState()与this.props.store.dispatch()的使用

一、redux理解

① 学习文档：

  1）英文文档：https://redux.js.org/

  2）中文文档：http://www.redux.org.cn/

  3）github: https://github.com/reactjs/redux

② redux是什么？

  1）redux是一个独立专门用于做状态管理的JS库（不是react插件库）

  2）它可以用在react、angular、vue等项目中，但基本与react配合使用

  3）作用：集中式管理react应用中多个组件共享的状态

③ 什么情况下使用redux

  1）总体原则：能不用就不用，如果不用比较吃力才考虑使用

  2）某个组件的状态，需要共享

  3）某个状态需要在任何地方都可以拿到

  4）一个组件需要改变全局状态

  5） 一个组件需要改变另一个组件的状态

二、redux的核心API

① createStore()  —— redux核心函数

  1）作用：创建包含指定reducer的store对象

  2）编码：

import {createStore} from 'redux'
import {counter} from './reducers'

const store = createStore(counter)

② store对象

  1）作用：redux库最核心的管理对象

  2）它内部维护着：state和reducer（根据旧的状态产生新的状态的函数）

  3）核心方法：

    getState()

    dispatch(action)

    subscribe(listener)

  4）编码：

store.getState()
store.dispatch({type:'INCREMENT',data:number})
store.subscribe(render)

③  applyMiddleware()

  1）作用：应用上基于redux的中间件（插件库）

  2）编码：

import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk' // redux异步中间件
const store = createStore(
    counter,
    applyMiddleware(thunk)   // 应用上异步中间件
)

④ combineReducers()

  1）作用：合并多个reducer函数

  2）编码：

export default combineReducers({
    user,
    chatUser,
    chat
})

三、redux的三个核心概念

 ① action  

      a. 标识要执行行为的对象

      b. 包含2个方面的属性：

               type：标识属性，值为字符串，唯一，必要属性

               data：数据属性，值类型任意，可选属性

      c. 例子：

const action = {
  type:'INCREMENT',
  data: 2
}

      d. Action Creator（创建Action的工厂函数）

const increment = number =>({
  type:'INCREMENT',
  data:number
})

 ② reducer

      a. 根据旧的state和action，产生新的state的纯函数

      b. 样例：

import {INCREMENT, DECREMENT} 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
    }
}

    c. 注意：返回一个新的状态；不要修改原来的状态。 

 ③ store —— 最终是管理state

    a. 将state、action与reducer联系在一起的对象

    b. 如何得到此对象？

import {createStore} from 'redux'
import reducer from './reducers'
const store = createStore(reducer)

    c. 此对象的功能？

getState()：得到state
dispatch(action)：分发action，触发reducer调用，产生新的state
subscribe(listener)：注册监听，当产生了新的state时，自动调用

四、使用redux编写counter应用

1. 下载redux依赖包

cnpm i --save redux

2. action-types.js

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

3. reducers.js

import {INCREMENT, DECREMENT} 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
    }
}

3. index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from "redux";
import {counter} from './redux/redux_counter/reducers'
import App from "./App";

const store = createStore(counter)

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

// 初始化渲染
render()

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

4. App.js

import React, {Component} from 'react';
import {DECREMENT, INCREMENT} from "./redux/redux_counter/action-types";

//非受控组件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({type: INCREMENT, data: number})
    }
    // 减少
    decrement = () => {
        const number = this.select.value * 1
        // const count = this.props.store.getState()
        // this.setState({count: count - number})
        this.props.store.dispatch({type: DECREMENT, data: 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({type: INCREMENT, data: number})
        } else {
            alert(`${count}不是奇数呦！`)
        }
    }

    // 异步增加（设置延时定时器）
    incrementAsync = () => {
        const number = this.select.value * 1
        setTimeout(() => {
            this.props.store.dispatch({type: INCREMENT, data: 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;

5. 效果图