含義

• Redux是專門用作狀態管理的js庫，不是react插件庫
• 可以用在react、angular、vue等項目中
• 能集中式管理react應用中多個組件共享的狀態

使用

npx create-react-app redux1
cnpm install redux -S

關鍵字

• store
• reducer
• action
• subscribe

案例

1. 創建store、并傳入reducer 
import { createStore } from 'redux'
import { counter } from './redux/reducers'
const store = createStore(counter)
2. 使用dispatch
store.dispatch({type: '', // action的名字 data: '', // 傳給action的參數
})
3. reducer里處理數據
function counter(state = 0, action) {const { type, data } = action// 結構出dispatch的action type和參數，返回state
}
4. 監聽state，觸發更新
store.getState() // 獲取最新的state
store.subscribe(render) // 觸發ReactDOM.render

• index.js 入口文件

import ReactDOM from 'react-dom'
import App from './App'
import { createStore } from 'redux'
import { counter } from './redux/reducers'
const store = createStore(counter)// state監聽，變化時執行傳入的方法
store.subscribe(render)
function render() {ReactDOM.render(<App store={store} />,document.getElementById('root'))
}
render()

• reducers.js

export function counter(state = 0, action) {const { type, data } = actionconsole.log('reduce 觸發了方法', type)console.log('reduce 接收參數', data)switch (type) {case 'add':return state + datacase 'minus':return state - datacase 'add_odd':if (data % 2 !== 0) {return state + data}case 'add_delay':// 這里實現不了延時返回，可以拿到外面調用方法處去做延時調用setTimeout(() => {return state + data}, 1000)default:return state}
}

• action.js

export function add (param){return{type: 'add', // 方法名data: param // 對應參數}
}
export function minus (param){return{type: 'minus',data: param}
}
export function add_odd (param){return{type: 'add_odd',data: param}
}
export function add_delay (param){return{type: 'add_delay',data: param}
}

• App.jsx UI

import React, { Component, createRef } from 'react'
import * as actions from './redux/action'export default class App extends Component {constructor(props) {super(props)this.selectRef = createRef()}compute = (method) => {const selectDom = this.selectRef.current,selectVal = Number(selectDom.value),store = this.props.store;console.log('app store/method', store, method)store.dispatch(actions[method](selectVal))}render() {const count = this.props.store.getState()console.log('重新render了', count)return (<><h1>數值：{count}</h1><select ref={this.selectRef}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>&nbsp;<button onClick={() => this.compute('add')}>+</button>&nbsp;<button onClick={() => this.compute('minus')}>-</button>&nbsp;<button onClick={() => this.compute('add_odd')}>奇數加</button>&nbsp;<button onClick={() => this.compute('add_delay')}>延遲加</button></>)}
}