redux （一）

---

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:[] }