Learn Redux

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