1. redux

管理 state

1.1. 安装

npm install --save redux

1.2. React + redux

npm install --save react-redux

1.3. router

npm install --save react-router-redux

1.4. 说明

1.4.1. Store

  • 整个应用只有一个唯一的 Store
  • Store 对应的状态树(State),由调用一个 reducer 函数(root reducer)生成
  • 状态树上的每个字段都可以进一步由不同的 reducer 函数生成
  • Store 包含了几个方法比如 dispatch, getState 来处理数据流
  • Store 的状态树只能由 dispatch(action) 来触发更改

1.4.2. Redux 的数据流

  • action 是一个包含 { type, payload } 的对象
  • reducer 函数通过 store.dispatch(action) 触发
  • reducer 函数接受 (state, action) 两个参数,返回一个新的 state
  • reducer 函数判断 action.type 然后处理对应的 action.payload 数据来更新状态树

所以对于整个应用来说,一个 Store 就对应一个 UI 快照,服务器端渲染就简化成了在服务器端初始化 Store,将 Store 传入应用的根组件,针对根组件调用 renderToString 就将整个应用输出成包含了初始化数据的 HTML。

1.4.3. Reducer

Store 是由 reducer 产生的,所以 reducer 实际上反映了 Store 的状态树结构

1.4.4. Action

1.4.5. Selector

参考 Reselect

results matching ""

    No results matching ""