ss707494

Redux Best Practices (Redux最佳实践) – Kyle Poole – Medium

ss707494 · 2017-05-24翻译 · 1182阅读 原文链接

Redux可以管理你的应用状态.他是一个很好用并且可预测的状态管理工具,但是相比Mobx (Dan Abramov’s tweet)速度上可能会稍微慢点.

React通过取出store中的数据来自动渲染UI以实现响应式的UI编程(就像名字React那样).因此你不必告诉视图层'如何更新UI'.同样的,我认为Redux/Flux使你的数据层(model)变成自动响应式,通过处理actions,这样你不必告诉数据模型(model)如何更新自己数据模型就会自己更新.-from @dtinth

规则

你的 reducers必须是纯函数(确定的).

所有具有副作用(不确定)的逻辑(外部服务,异步代码)都应该写在action中(可以通过redux-thunk and/or redux-saga这样一些辅助插件实现)

容器可以通过selectors来读取store中的数据.selectors和reducers可以协同作用来处理api数据.

学着在所有地方使用selectors. 即使是在一个细小的位置.

Redux应该储存尽可能少的state,而让Selectors去计算派生的数据.

如果需要缓存之前selectors的计算结果(某些派生数据),你可以使用Reselect.

Selectors可以和其他selectors组合

规范化的数据结构可以构造出更好的reducer组合

  • 可以看这篇关于规范化示例的文章

Reducer 组合

用Redux以多层次的方式组织你的数据模型和集合(一种标准化模型).相比于将其作为一个整体,这将会是一个更好的方式.

就像Selectors和Components一样,Reducers也是可组合的!

将你的Redux看成是reducers组成的树(就像React渲染DOM时的树形结构那样).他们可以被当做不同函数的组合.

就算应用中有许多许多的reducers也是完全没问题的.

下面是Dan的视频,介绍了相关概念:

结构和命名

使用 Ducks

  • 提示: Dan 并不鼓励使用ducks因为它可能会妨碍你将actions和reducers一一对应. tweet

使用redux-actions

action 命名规则: \<名词>_\<动词>

action creator 命名规则: \<动词>\<名词>

selector 命名规则: get\<名词>

Actions

  • action(常量)命名为\<动词>_\<名词>,动词用现在时

  • 为什么? 用于避免命名冲突同时利于排序

TODO_ADD
  • redux-actionscreateAction() 方法来生成你的action creators

  • 为什么? 可以减少重复代码以符合FSA标准

createAction( ‘TODO_ADD’ )
  • action creator 命名为\<动词>\<名词>

  • 为什么? 可以明确区分不同方法

const addTodo = createAction( ‘TODO_ADD’ )

Selectors

  • selector 命名为 get \<名词>

  • 为什么? 可以区分不同方法类型

const getTodo = (state) => state

Reducers

export default handleActions({

  TODO_ADD: (state, action) => ([
    ...state,
    action.payload,
  ]),

  // Other reducers
  // ...
  //

}, initialState )
  • 为什么没有用文档中的switch语句?主要是因为他可以实现简洁的类似于switch语法的功能,同时每一分支都有自己作用域.这意味着你可以在各个分支用重复变量名.而在switch中,你的作用域在switch中,所以你必须避免命名冲突.

文件

  • 组织Redux目录可以按照Ducks的范例来将其放在一个单独目录下(通常叫做 flux/, ducks/, or stores/).可以从这个链接需求帮助

  • reducer示例:

import { createAction, handleActions } from 'redux-actions';
//- Actions
export const addTodo = createAction( 'TODO_ADD' )
//- State
const initialState = []
//- Reducers
export default handleActions({
  TODO_ADD: (state, action) => ([
    ...state,
    action.payload,
  ]),
  // Other reducers
  // ...
  //
}, initialState )
//- Selectors
export const getTodos = (state) => state

文件格式

相关资料

相关文章