Flux Link to heading

首先我们回顾一下 flux 的模式

Flux的核心思想就是 数据和逻辑永远单向流动

redux Link to heading

redux 借鉴了很多 flux 里的概念, 只是略有不同. redux 也是一种模式的设计.

createStore Link to heading

抽象出来一个 createStore, 它可以产生 store, 里面包含 getState 和 dispatch. 发现每次都要重复的渲染所有组件, 我们引入观察者模式, 加入 subscriber 和 listener, 把渲染这个 object(实际是函数) 压到 listener 的array 里.

共享结构对象 Link to heading

共享结构对象的实质就是简单的在渲染开头判断有没有修改数据, 如果修改过数据才渲染, 不然不渲染.

reducer Link to heading

reducer 也可以叫做 stateChanger, 目的是初始化 state 或者根据 oldState 和 action 计算新的 newState. 这样做就相当于大张旗鼓的告诉大家我要修改 state 了, 从而做到了每个 action 都会在系统中留下一笔的效果.

一个简单的套路结构 Link to heading

// 定一个 reducer
function reducer (state, action) {
  /* 初始化 state 和 switch case */
}

// 生成 store
const store = createStore(reducer)

// 监听数据变化重新渲染页面
store.subscribe(() => renderApp(store.getState()))

// 首次渲染页面
renderApp(store.getState())

// 后面可以随意 dispatch 了，页面自动更新
store.dispatch(...)

credit to Link to heading

• flux模式架构
• react 小书