redux的基本使用

一、redux 1、安装：

yarn add redux

2、原理图

3、使用

（1）、src下建立:

-redux
	-store.js
	-count_reducer.js
	-count_action.js 专门用于创建action对象
	-constant.js    放置容易写错的type值

（2）、store.js

a. 引入redux中的createStore函数，创建一个store
b. createStore调用时要传入一个为其服务的reducer
c. 暴露store对象

/*
    该应用专门用于暴露一个store对象，整个应用只有一个store对象
 */

// 引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'

export default createStore(countReducer)

（3）、count_reducer.js：

a. reducer的本质是一个函数，接收：preState,action，返回加工后的状态
b. ducer有两个作用：初始化状态，加工状态
c. reducer被第一次调用时，是store自动触发的，
	传递的preState是undefined,
	传递的action是:{type:'@@REDUX/INIT_a.2.b.4}
d. 在index.js中监测store中状态的改变，一旦发生改变重新渲染
	备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

/* 
    该文件你时用于创建一个为Count组件服务的reducer，reducer的本质是一个函数
 */

import { INCREMENT } from "./constant"

const initState = 0  // 初始化状态
export default function countReducer(preState=initState, action) {
    // 从action中获取type，data
    const { type, data } = action
    // 根据type决定如何加工数据
    switch (type) {
        case INCREMENT:
            return preState + data
        default:
            return preState
    }
}

（4）、count_action.js：

1）作用：专门用于创建action对象
2）异步action：当异步 *** 作不想在组件中处理而要交给action时

a. yarn add redux-thunk，并配置在store中
b. 创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
c. 异步任务有结果后，分发一个同步的action去真正 *** 作数据。

/* 
    该文件专门为Count组件生成action对象
 */

import { INCREMENT } from "./constant"

// 同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type: INCREMENT, data})

// 所谓的异步action，就是指action的值为函数,异步action中一般都会调到同步action，异步action不是必须要用到
export const createIncrementAsyncAction = (data,time) => {
    return (dispatch) => {
        setTimeout(() => {
            dispatch(createIncrementAction(data))
        }, time)
    }
}

异步action需要在store.js中做如下配置：
1、引入applyMiddleware和thunk
2、createStore的第二个参数传入applyMiddleware(thunk)

import {createStore, applyMiddleware} from 'redux'
import countReducer from './count_reducer'
// 引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'

export default createStore(countReducer, applyMiddleware(thunk)) 

（5）、入口文件即index中监听redux状态中的改变：

import store from './redux/store';
import { Provider } from 'react-redux'
/* 
  因为dom的diff算法，写到入口文件中也不会引起页面大量重绘重排
  监测redux中状态的变化，只要变化，就调用render
  只要redux保留的任何一个状态发生了改变，都会触发该方法
 */
store.subscribe(() => {
  root.render(
      <App />
  );
})

（6）、组件中使用：

import React, { Component } from 'react'
// 引入store，用于获取redux中的状态
import store from '../../redux/store'
// 引入actionCreator，专门用于创建action对象
import {
    createIncrementAction, 
    createIncrementAsyncAction
} from '../../redux/count_action'

export default class Count extends Component {

    // 加法
    increment = () => {
        const {value} = this.selectNumber
        // 通知redux+value
        store.dispatch(createIncrementAction(value*1))
    }

    // 异步加
    incrementAsync = () => {
        const {value} = this.selectNumber
        store.dispatch(createIncrementAsyncAction(value*1, 500))
    }

    render() {
        return (
            <div>
                <h1>当前求和为：{store.getState()}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.incrementAsync}>异步+</button>
            </div>
        )
    }
}