明確概念：

Reducer

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

1. 修改傳入參數
2. 執行有副作用的操作（如API請求和路由跳轉）
3. 調用非純函數（如Date.now() 或 Math.random()）

reduce

• 數組的reduce

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

redux

• 什么是redux

1. redux是一個純粹的狀態管理器，不僅限react可以使用。將動作(action) 變換成 state 轉換函數(reducer)，然后放到一個統一的地方(store)來 setState
2. 數據處理方式：默認只支持同步，實現異步需要添加中間件（??：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. 數據處理流程：

• redux用法

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

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. 在組件中，導入倉庫，向props中添加事件和屬性

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

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

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"}
        }

    }
)(組件名)