Redux
- reducer: (preState: (init) , action) => newState
- const { createStore } = Redux || import { createStore } from 'redux'
const store = createStore({'reducer ()'}) - render: { … store.getState()
- store.subscribe(render)
render() - store.dispatch({...})
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'D........':
return state - 1
default:
return state
}
}
// pre writing
const { createStore } = Redux
const store = createStore(counter)
// now writing
// [ Implementing store from scratch ]
const createStore = (reducer) => {
let state
let listeners = []
const getState = () => state;
const dispatch = (action) => {
state = reducer(state, action)
listeners.forEach(listener => listener())
}
const subscribe = (listener) => {
listeners.push(listener)
return () => {
listeners = listeners.filter(l => l !== listener)
}
}
dispatch({})
return { getState, dispatch, subscribe }
}
const render = () => {
document.body.innerText = store.getStatr()
}
store.subscribe(render)
render()
document.addEventListener('click', () => {
store.dispatch({ type: 'IN....' })
})
Avoid Array Mutations with concat(), slice(), and ...spread
Avoid Object Mutations with Object.assign() and ...spread
define reducers
APP <= combine reducers
createStore(APP)
Redux 和 reduce 的联系与区别
总结一下 Redux 和 reduce 的联系与区别。
相同点:
- reduce和Redux都是对数据流进行fold(折叠、归约);
- 两者都包含一个累积器(reducer)((a, b) -> a VS (state, action) -> state )和初始值(initialValue VS initialState ),两者都接受一个抽象意义上的列表(list VS stream )。
不同点:
- reduce:接收一个有限长度的普通列表作为参数,对列表中的元素从前往后依次累积,并输出最终的累积结果。
- Redux:由于基于时间的事件流是一个无限长的抽象列表,我们无法显式地将事件流作为参数传给Redux,也无法返回最终的累积结果(事件流无限长)。所以我们将事件流抽离出来,通过 dispatch 主动地向 reducer 累积器 push action,通过 getState 观察当前的累积值(中间的累积过程)。
- 从冷、热信号的角度看,reduce 的输入相当于冷信号,累积器需要主动拉取(pull)输入列表中的元素进行累积;而Redux的输入(事件流)相当于热信号,需要外部主动调用 dispatch(action) 将当前元素push给累积器。
由上可知,Redux将所有的事件都抽象为 action,无论是用户点击、Ajax请求还是页面刷新,只要有新的事件发生,我们就会 dispatch 一个 action给 reducer,并结合上一次的状态计算出本次状态。抽象出来的统一的事件接口,简化了处理事件的复杂度。
Redux还规范了事件流——单向事件流,事件 action 只能由 dispatch函数派发,并且只能通过 reducer 更新系统(网页)的状态 state,然后等待下一次事件。这种单向事件流机制能够进一步简化事件管理的复杂度,并且有较好的扩展性,可以在事件流动过程中插入 middleware,比如日志记录、thunk、异步处理等,进而大大增强事件处理的灵活性。