在公司项目中看到的immutable+react+redux+createSelector

immutable

  1. 不可变数据
  2. fromJS() 将JS对象转化为immutable对象
  3. toJS() 将immutable对象转化为JS对象(如果要console查看对象的结构,要用toJS方法先转为JS对象,不然好像看不到具体结构/可能是我没把...都点开吧)
  4. 使用get set方法,读取和修改immutable对象中属性
  5. 修改immutable对象,不会改变原对象,但是会返回一个新的对象。新对象复用原对象旧的结构。

react-redux

  1. 使用mapStateToProps将store中的数据转为当前组件的props
    a. 容器组件/UI组件 容器组件负责redux交互 操作store,并将store以props的形式给UI组件
    b. 默认传入store中的state
    c. 返回值为对象
  2. 使用mapDispatchToProps将store中操作数据的方法转为当前对象的props
    a. 默认传入dispatch方法
  3. 使用connect(mapStateToProps, mapDispatchToProps)(UI组件) 连接

reselect

使用reselect缓存 mapStateToPros计算返回的对象,提升性能。
通过例子来理解吧:

import { createSelector } from 'reselect'
import { FilterTypes } from '../constants'

export const selectFilterTodos = createSelector(
    [getTodos, getFilters],
    (todos, filters) => {
      switch(filters) {
        case FilterTypes.ALL:
            return todos;
        case FilterTypes.COMPLETED:
            return todos.filter((todo) => todo.completed)
        default:
            return todos
      }
    }
)
const getTodos = (state) => {state.todos}
const getFilter = (state) => {state.filter}

getTodos getFilters 是两个获取redux中数据的方式,
selectFilterTodos调用的时候,会先计算这两个函数的结果,
如果和上一次计算的结果相同,其计算函数(第二个参数 中的箭头函数)不会执行。
如果和上一次计算的结果不同,其计算函数将会执行,参数为这两个函数的返回值。
selectFilterTodos的返回结果是mapStateToProps所需的方法,直接在mapStateToProps中使用该参数:

const mapStateToProps = (state) => {
  return {
    todos: selectFilterTodos(state)
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容