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