明確概念：

Reducer

• 是一個純函數(shù)，接收舊的state和action，返回新的state
• 與被傳入Array.pototype.reduce(reducer, ?initialValue)里的回調(diào)函數(shù)屬于相同類型
• 保持reducer純凈十分重要，永遠不要在reducer中執(zhí)行如下操作：

1. 修改傳入?yún)?shù)
2. 執(zhí)行有副作用的操作（如API請求和路由跳轉(zhuǎn)）
3. 調(diào)用非純函數(shù)（如Date.now() 或 Math.random()）

reduce

• 數(shù)組的reduce

array=[1,2,3,4,5]
const reducer = (sum ,currentValue)=> (
// 第一次循環(huán)，sum 等于1，currentValue等于2
// 之后循環(huán)currentValue被依次順序賦值，sum做累加結(jié)果
// 循環(huán)結(jié)束，返回最終累加結(jié)果
  return sum + currentValue
)
array.reduce(reducer)

redux

• 什么是redux

1. redux是一個純粹的狀態(tài)管理器，不僅限r(nóng)eact可以使用。將動作(action) 變換成 state 轉(zhuǎn)換函數(shù)(reducer)，然后放到一個統(tǒng)一的地方(store)來 setState
2. 數(shù)據(jù)處理方式：默認只支持同步，實現(xiàn)異步需要添加中間件（??：redux-thunk 和 redux-logger）

npm install redux-thunk edux-logger --S

3. 專門用于react的redux是：react-redux

npm install redux --S
npm install react-redux --S

4. 數(shù)據(jù)處理流程：

• redux用法

1. 創(chuàng)建倉庫（store）文件夾 (例如：xxxStore.js)。編寫如下內(nèi)容：

import {createStore} from 'redux'
// state有默認值，action從外界傳入
function counterReducer(state = 0, action) {
    switch (action.type) {
        case "add":
        return state + 10
            
        case "subtraction":
        return state - 20
            
        default:
            return state
    }
}

2. 修改index.js

import store from './store/ReactReduxStore'
import {Provider} from 'react-redux'

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

3. 在組件中，導(dǎo)入倉庫，向props中添加事件和屬性

import React, {Component} from 'react'
import {connect} from 'react-redux'

// react-redux 提供了兩個重要API provider為后代組件提供store connect為組件提供數(shù)據(jù)和變更方法

class 組件名 extends Component {
    render() {
        console.log(this.props);
        
        const {counter, add, sub} = this.props

        return (
        <div>
            <div>react-redux</div>
            <p>{counter}</p>
            <button onClick={add}>add</button>
            <button onClick={sub}>subtraction</button>
        </div>
        )
    }
}

export default connect(
// 向props中添加事件和屬性
    // state
    state => {
        console.log(state);
        return {counter: state}
    },

    // dispatch
    {
        add: () => {
            return {type: "add"}
        },
        sub: () => {
            return {type: "subtraction"}
        }

    }
)(組件名)