redux 是一個狀態管理的庫。

redux認為頁面所有的變化，都是基於狀態的改變觸發的，所以我們維護一個應用的時候，都是在維護這些狀態。而 redux 就是為了維護狀態而生的。

API

• createStore( reducer, [initialState], enhancer ) 函數：
  創建應用的數據 store （一個對象，包含了應用所有的狀態），一個應用只能有一個store。

  createStore參數

  reducer: 一個純函數，接收兩個參數，分別是當前的state 和 action，（action就是一個指令，用來告訴redux改修什麽狀態） ， reducer的返回值必須是新的state。
  [initialState] (any): 初始時的 state 。
  enhancer ： 增強器。也就是中間件，可以改變，redux規定的一些接口類型。

createStore返回值

保存了應用所有 state 的對象。改變 state 的惟一方法是 通過 dispatch 發起action，redux會執行對應state更新函數。subscribe( fn ) 監聽器可以監聽state的變化，執行傳入的函數。

import { createStore } from ‘redux‘

// reducer 函數
function todos(state = [], action) {
  switch (action.type) {
    case ‘ADD_TODO‘:
    // 數據變化後返回的必須是一份新的數據，而不能在原來的數據上修改
      return state.concat([ action.text ])
    default:
      return state
  }
}

// createStore 函數 ，接收reducer 和 初始state 
let store = createStore(todos, [ ‘小明‘ ])

// dispatch 發起 action，在這裏，action還附帶了一個 text 的數據給reducer
store.dispatch({
  type: ‘ADD_TODO‘,
  text: ‘小李‘
})

//監聽器，state更新時，就會觸發。
store.subscribe(()=>console.log("數據更新啦"));

// store.getState 可以獲取到最新的state。
console.log(store.getState()) // ["小明","小李"]
 

• combineReducers( reducers )
  用來對復雜應用的 reducer 函數 進行拆分,拆分後的每一塊獨立負責管理 state 的一部分。
  合並後的 reducer 可以調用各個子 reducer，並把它們的結果合並成一個 state 對象。state 對象的結構由傳入的多個 reducer 的 key 決定。

combineReducers({ 
    todos: myTodosReducer, 
    counter: myCounterReducer 
}) 

參數：
reducers (Object): 一個對象，它的值（value） 對應不同的 reducer 函數，這些 reducer 函數後面會被合並成一個
返回值：合並了所有子reducer的reducer函數

子reducer => reducers/todos.js

export default todos( state=[] , action ){
  switch (action.type) {
  case ‘ADD_TODO‘:
    return state.concat([action.text])
  default:
    return state
  }
}

子reducer => reducers/counter.js

export default counter( state = 0 , action ){
    switch( action.type ){
        case "INCREMENT":
            return ++state
        case "DECREMENT":
            return --state
        default:
            return state    
    }
} 

用 combineReducers 合並所有子 reducer。
reducers/index.js

import { combineReducers } from ‘redux‘
import todos from ‘./todos‘
import counter from ‘./counter‘

// 合並並導出reducer
export default combineReducers({
    todos,
    counter
})

App.js 使用合並後的reducers

import { createStore } from ‘redux‘
import reducer from ‘./reducers/index‘

// 創建store時就可以用合並後的reducer
let store = createStore( reducer );

console.log(store.getState()) // { counter:0 , todos:[] }

store.dispatch({
  type: ‘INCREMENT‘
})

console.log(store.getState()) // { counter:1 , todos:[] }

redux （一）