阅读 962

深入理解Redux


                              

Redux的前世今生

在理解Redux之前,我们应该要知道Redux的开发目标和实现理念。

Redux的作者是Dan Abramov

Dan 在他准备 React Europe 演讲《热加载和时间旅行》时开始开发 Redux。

当时的目标是创建一个状态管理库,来提供最简化 API,但同时做到行为的完全可预测,以实现日志打印,热加载,时间旅行,同构应用,录制和重放。

我们知道这时候React已经很火了。

同时还有一个配套React的状态管理库,他叫 Flux……


React和Flux都是Facebook内部孵化的项目,至少当时Flux是为了配合React而开发的。

Flux有以下几个特点:

1、单向数据流。

2、Store 可以有多个。

3、Store 不仅存放数据,还封装了处理数据的方法。

4、视图事件发出 Action ,经由 Dispatcher 派发给 Store。

下面一段代码很清晰地体现了Flux的特点:


多Store思想,是Flux现在不够流行原因之一,但是它作为先驱开创先河的精神是值得肯定的。

Flux是一个库,逐渐演变成一种架构思想。

Flux的核心思想就是共享状态和数据和逻辑永远单向流动。

从写一段Redux开始

Redux站在巨人的肩膀上,有效借鉴了Flux的思想并做了优化。

Redux的特点:

1、单向数据流。

2、单一数据源,唯一Store。

3、Store 不仅存放数据,还封装了处理数据的方法。

4、没有 Dispatcher ,而是在 Store 中集成了 dispatch 方法,store.dispatch() 是 View 发出 Action 的唯一途径。

写一段Redux代码:

import { createStore } from 'redux';

const initState = {
  count: 0,
};
function reducer(state = initState, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
}
const store = createStore(reducer);

store.subscribe(() => {
  console.log('redux state:', store.getState());
});
store.dispatch({
  type: 'increment',
});
export default store;复制代码

一个简单的redux实现就是这样。

store.dispatch发出一个action,action必须是对象类型并且要附有type属性。

action会被发送到reducer中作为第二参数,reducer函数返回值会被用来更新store。

reducer的第一参数是上一次的state对象,当首次调用reducer时,state为undefined,这时候initState会被赋值为state,这是也就是初始化state的推荐方式。

Redux的三驾马车:

Store: 存储应用 state 以及用于触发 state 更新的 dispatch 方法等,整个应用仅有单一的 Store 。

Action: Action 是用于更新 state 的消息对象,必须由dispatch发出。

Reducer: 是一个用于改变 state 的纯函数

reducer必须是一个纯函数,它是修改state的唯一途径。这保证了单向数据流,同时每次返回一个完整的state对象,Redux可以记录这些变化以实现时间旅行。

Redux vs. Vuex


在对比Vuex之前我们也先来写一段Vuex代码:

import Vuex from 'vuex';

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count += 1;
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
  },
  modules: {
  },
});

store.subscribe((mutation, state) => {
  console.log('vuex state:', state);
});

store.dispatch('increment');
store.dispatch('incrementAsync');

export default store;复制代码

但是这时候会报错:


这说明Vuex与Vue必须绑定使用,它不是一个独立的状态管理方案。

在补充上 Vue.use(Vuex) 之后,代码可以正常运行。

Vuex同样是通过dispatch发出一个action通知,这个action通知可以是String也可以使用action type对象的方式发出。

actions通知会触到到对应的action方法,通过action方法的commit触发对应的mutation。与Redux action不同的是Vuex action可以支持异步方式。

mutation是修改state的唯一途径。但是mutation不需要返回完整的state,而是可以直接在state上修改属性。这是因为Vuex的观察者模式是使用defineProperty的setter实现的,在修改数据的时候setter会收集到修改内容,Vuex会记录这些修改,同样可以实现时间旅行功能。

Vuex出自Redux之后,Vuex的定制化使得我们在Vue中感到特别顺滑,但是这也限制了Vuex的使用场景。

到这里我们已经可以很明显地对比Vuex和Redux了。

Redux vs. Vuex:

1、Vuex和Redux都是Flux思想的一种实现,由于目的不一样,所以实现的方案不一样。

2、Redux目的是低版本兼容以及通用;Vuex是为Vue量身打造。

3、Redux实现时光旅行是使用Reducer方法返回存快照;Vuex使用setter,用户无感。

4、 Redux本身不支持异步数据流(副作用),是理论的标准实现;Vuex支持异步数据,更贴合业务。

5、Vuex(in Vue) ≈ Redux + Redux-thunk(或其他任意异步方案)+ mina-redux (in React )

Redux和Vuex是兄弟关系。


在小程序中使用Redux

我是在2017年开始使用React + Redux,后面一直延续了两年,项目结构一直都大同小异。

一个经典的react项目依赖:

React + React-router + React-redux + Redux + Redux-thunk + Immutablejs

这里必须鼓吹一下Immutablejs,Immutablejs是个持久化数据结构的实现,持久化数据就是一旦创建,就不能再被更改的数据,这个思想在JS中特别棒。可惜被复杂的API拖累,Immutablejs并不是特别普及,经常用来做React的性能优化补充。有兴趣的可以自己去了解一下,这里就不细说了。

后来工作中有一次需要搭建一个微信小程序框架,在对比了 taro、mpvue、wepy 等许多方案后,最终还是决定使用原生小程序框架开发。

当然现在 taro 它们都是一个很优秀的且完善的框架了,但是在当时这些框架的open issue和文档真的有点劝退,直到今天我还是一直坚持使用原生小程序框架做开发。

选定了使用原生小程序框架开发也是遇到了许多问题,其中之一就是状态管理,也是找了许多方案,但是都不是很满意,最后自己写了一个简单的开源库—miniprogram-sync-state


miniprogram-sync-state借鉴了React-redux的API,目的是降低学习成本和无侵入的代码风格。这个库在小型项目中使用是没问题的,但是在大型项目中可能就显得捉襟见肘(无模块化是最主要的问题)。

后来在我行开发项目的时候就想使用这个模式连接Redux在小程序使用,所以就开发出了minapp-redux。掘金地址

在开发minapp-redux的时候也考虑了几个问题:

1、为什么是redux?

redux作为一个最好的flux最好的实现之一,他拥有庞大的社区支持与完善的插件支持。并且相对于vuex的定制化,redux作为一个极简的状态管理系统(通过第三方库实现定制化),天生有易于移植、适用于任何框架的基因。 事实上,minapp-redux也可以归属于redux的定制化连接库之一。

2、运行时如何map?

由于小程序规范,data中的数据必须在初始化page对象时存在,minapp-redux提供的connect语法会在小程序初始化时调用,使用Page(connect(stateMapFun, methodMapFun)(pageObject))语法,pageObject保持了你原本page对象的完整性,便于项目移植或移除minapp-redux。在后续redux状态改变的时候,使用redux API subscribe监听状态变化,并通过保存store实例使用setData更新到视图。

3、如何优化性能?

minapp-redux使用了专属于小程序的diff更新机制,在有属性变化的时候会比较新store返回的stateMap与page对象中当前data的属性,并且抽取出变化属性的集合(丢弃相同值的属性),保证最小粒度的更新。 值得注意的一点是,有时候我们会使用特别复杂的store对象作为map属性,而对这些复杂对象的diff对比会带来比较大的开销,所以minapp-redux使用浅比较,当遇到map数据类型为Object时,会将整个对象直接赋值更新。


最终形成了一套完整的小程序状态管理方案:

minapp-redux + redux + redux-thunk + redux-logger

这套方案已经我行两个线上项目中稳定运行。


以上就是我对Redux的理解以及使用Redux的经验,希望能对大家有所帮助。

谢谢!

—— The End


文章分类
前端
文章标签