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、异步处理等，进而大大增强事件处理的灵活性。
