读书笔记：Flux & Redux（未完）

[nuysoft]

Redux

setState() -> Store.dispath()

Redux 试图让 state 的变化变得可预测。

参考资源

• Redux 中文文档

核心概念

component -> action -> reducer -> state

• Actions are payloads of information that send data from your application to your store.
  把数据从应用传到 store 的有效载荷。
• Reducers specify how the application's state changes in response.

  指明应用如何更新 state。
• Store is the object that brings actions and reducers together.
  使用 action 来描述『发生了什么』，使用 reducers 来根据 action 更新 state，Store 把它们联系到一起的。

三大原则

• 单一数据源
  整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
• State 是只读的
  惟一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
• 使用纯函数来执行修改
  为了描述 action 如何改变 state tree ，你需要编写 reducers。

Action

Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

{
    type: '...',
    payload: { ... }
}

Reducer

(previousState, action) => newState

Store

state 是一棵树。

• let store = createStore( reducers )
• store.getState()
• store.dispatch( action )
• store.subscribe( listener )
• store.replaceReducer( nextReducer )

Flux

In Depth Overview

(state, action) => state

• Dispatcher
  • register(function callback)
  • dispatch(object payload)
• Actions
  • Payload
  • Type
• Stores
  • State
  • Logic
• Views
  • React Components

Actions

{
    type: '...',
    payload: { ... }
}

数据范式化

• 每个字段只包含最小的信息属性。
• 模型含有主键，非主键字段依赖主键。
• 模型非主键字段不能相互依赖。