写点什么

浅浅谈 Redux

用户头像
Daniel
关注
发布于: 2021 年 06 月 14 日
浅浅谈Redux

if 读完了 then 你能了解到:

  • 好钢用在刀刃 - redux 的应用场景

  • 万变不离其宗 - redux 的基本思路


一些唠叨

最近有个任务,就是需要在一个开源项目上进行扩展开发,而这个开源项目用到的是非常主流的 react 和 react-redux,近些年一直在跟 vue 打交道(广告植入:比如开源了一个 vue 版本的 ncform 项目),冷落了 react 有一段时间了,刚好趁机重温下 react 及其周边相关的技术生态


react-redux,其实就是 redux 的 react 版本,方便 redux 在 react 中使用。


而 redux,是 javaScript 应用状态管理容器,是参考 flux 设计模式的一种实现(vue 的 vuex 也是类似的实现),它独立于各种 web 框架但又可融入于各种 web 框架。



哪里才是 redux 用武之地

很多人会认为,引入 redux 会增加应用的复杂性。确实不简单,但存在即合理,所以什么场景下适合使用 redux 就很关键了。


我就开发一个活动页。奉劝你不要用 redux 啦,一点好处都没有,只会增加复杂性。


切记:不要为了用而用 - 然而现实中这种现象是大量存在的


当一个应用的功能越来越多时,开始进行功能模块拆分,这个时候,就会遇到一个问题,功能模块之间共享的数据如何处理,比如登录用户的信息。


例子能再具体点吗?好吧,但还是登录用户信息,哈哈。


比如你在用户模块修改了头像,然后顶栏上的登录头像要实时跟着更新,这个时候,其实是用户模块和顶栏共享了你的用户头像信息


解决这种可能有 N 种方法,今天既然聊 redux,那就专心讲它吧


当你把数据梳理一下,你会发现有些数据是在模块内共享的,有些数据是在模块间共享的,我们将在模块间共享的称之为应用级别的数据,即 Application 级别,redux 就是专门处理这种级别数据的解决方案



redux 的基本思路

我们用 redux 官方的 todo app 例子来讲解( Warning: 仅为了说得简单,讲得明白,这种小应用是不适合引入 redux 的 )


你的应用有着一份描述着状态(state)的数据,可能如下:


🔸 术语

State: 应用级别的状态数据


{  todos: [{    text: 'Eat food',    completed: true  }, {    text: 'Exercise',    completed: false  }],  visibilityFilter: 'SHOW_COMPLETED'}
复制代码


这份 state 是静态的,你可以理解为就是应用最初的状态。


当我完成了 Exercise 项,我就打个勾,表示我完成了。此时就需要更改下应用的状态,需要把 Exercise 那一项 的completed 由 false 改成 true。


怎么更改呢?直接把值改了不就完事了?


如果直接改变 state 对象的属性值,就断了 state 更改的轨迹,简单讲就是你修改了一个对象的属性值,你就很难追踪属性值更改前是什么样子了。这在调试排查问题的时候非常有用。


一定有更好的方法,可参考下事件的机制。所以当想更改状态时,我们派发(dispath)一个操作(action),描述清楚我们想干什么,而不是直接就干了。一个操作的描述可能如下:


{ type: 'ADD_TODO', text: 'Go to swimming pool' }{ type: 'TOGGLE_TODO', index: 1 }{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
复制代码


🔸 术语

dispatch: 通过该方法主动派发操作

action: 描述操作的内容,type 值必须提供,指定行为的类型,相当于事件的名称


用派发操作的好处:

将每个更改描述为一个操作,让我们清楚地了解应用程序中发生的情况。 如果发生了变化,我们就知道它为什么会改变,操作就像面包屑,使得应用状态的变化有迹可循


OK,至此啥事还没做,只是嘴上嚷嚷我要做什么,那总得有实际处理的方法吧。


没错,这些实际修改状态的方法称为 reducer。实现可能如下:


function visibilityFilter(state = 'SHOW_ALL', action) {  if (action.type === 'SET_VISIBILITY_FILTER') {    return action.filter  } else {    return state  }}function todos(state = [], action) {  switch (action.type) {    case 'ADD_TODO':      return state.concat([{ text: action.text, completed: false }])    default:      return state  }}
复制代码


🔸 术语

reducer:它负责接收当前 state 和 action,然后按照 action 的 type,根据当前 state 进行操作,最终返回一个全新的 state(返回全新的 state 保证了 数据修改的可追溯性)。


你会发现 visibilityFilter 返回的是查询条件字符串,而 todos 返回的是列表项数组列表。把它们返回的数据合并起来,就是一个完整的应用状态,如下:


function todoApp(state = {}, action) {  return {    todos: todos(state.todos, action),    visibilityFilter: visibilityFilter(state.visibilityFilter, action)  }}
复制代码


OK,到此为此,想干什么也说了,实际做事的也讲了,但好像还是云里雾里,脑袋里依然没有很清晰的全局的画面,好像还少了什么东西。


告诉你,少了一个管家,它管着应用的状态,它就是 store。


🔸 术语

Store: 管理应用状态数据,负责把 action, reducer 等串起来


我们借用 redux 的一些 api 来完整描述一个数据修改的全过程


  1. 创建 store。通过 reducer 作为参数,store 就可以通过 reducer 获取到应用状态的数据结构


let store = createStore(todoApp)
复制代码


  1. 监听变化。你可以在应用状态发生变化时做一些事,比如更新 DOM


function listener() { console.log(store.getState()) }store.subscribe(listener)
复制代码


  1. 派发操作。因为 store 拥有 reducer,所以只要把 action 交给 reducer 处理即可。处理后可以通知执行第 2 步中订阅的一些操作


let action = { type: 'ADD_TODO', text: 'Go to swimming pool' }store.dispatch(action)
复制代码


😫修改了好多次,终于写完了。。。



tags: react, flux, react-redux, redux


发布于: 2021 年 06 月 14 日阅读数: 33
用户头像

Daniel

关注

一源一世界 2019.03.03 加入

ncform / ncgen / nice-hooks 开源项目作者

评论

发布
暂无评论
浅浅谈Redux