Redux

Redux精简版 Redux Without Action

建立:

- redux
	- store.js
  - xxx_reducer.js

在store.js：
1)引入redux中的createStore函数，创建一个store
2)createStore调用时要传入一个为其服务的reducer
3)暴露store对象

import {createStore} from 'redux'
import reducer from './reducer'
export default createStore(reducer)

xxx_reducer.js：
1)reducer的本质是一个函数，接收：preState,action，返回加工后的状态
2)reducer有两个作用：初始化状态，加工状态
3)reducer被第一次调用时，是store自动触发的，传递的preState是undefined,传递的action是:{type:‘@@REDUX/INIT_a.2.b.4}

export default function reducer(pre,action){
    const {type,data} = action
    switch (type) {
        case 'increment':
            return pre + data
           
        case 'decrement':
            return pre - data
  
        default:
            return 0       
    }
}

在index.js中监测store中状态的改变，一旦发生改变重新渲染 ‘‘
备注：redux只负责管理状态,状态的改变驱动着页面的展示要自己写。

import React, { Component } from 'react'
import store from './store'
export default class add extends Component {

componentDidMount(){
    store.subscribe(()=>{
        this.setState({})
    })
}
    increment=()=>{
       const{value} = this.selectNum
        store.dispatch({
            type:'increment',
            data: value*1
        })
    }
    decrement=()=>{
        const{value} = this.selectNum
        store.dispatch({
            type:'decrement',
            data: value*1
        })
     }  
    render() {
        return (
            <div>
                <h1>Total is {store.getState()}</h1>
                <select ref={c=>{this.selectNum=c}}>
                    <option value='1'>1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>add</button>
                <button onClick={this.decrement}>minuse</button>
            </div>
        )
    }
}

Redux异步Action版 Async function in Redux

何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。
具体编码：
1)yarn add redux-thunk，并配置在store中

store.js
//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//暴露store
export default createStore(countReducer,applyMiddleware(thunk))

2)创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务.

```
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
// import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';
import store from './components/increment/store'
store.subscribe(()=>{
	ReactDOM.render(<App/>,document.getElementById('root'))
})
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

3)调用action

increment=()=>{
   const{value} = this.selectNum
    // without action:
    //store.dispatch({
    //     type:'increment',
    //     data: value*1
    // })
    store.dispatch(createIncrementAction(value*1))
}

4)异步任务有结果后，分发一个同步的action去真正操作数据。

action.js
export function createIncrementAction(data){
    return {type:'increment',data}
}

export const createDecrementAction = data =>({type:'decrement',data})

export const createIncrementAsyncAction = (data,syncTime)=> {
    return (dispatch)=>{
		setTimeout(()=>{
			dispatch(createIncrementAction(data))
		},syncTime)
	}
}