博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
对前端状态管理的个人理解
阅读量:5820 次
发布时间:2019-06-18

本文共 3179 字,大约阅读时间需要 10 分钟。

在这篇文章中提到了前端状态管理的一种思路,也就是使用有限状态自动机来管理前端状态。初读时我没有深入思考以至于鲁莽的认为又是一篇描述函数式中的条件执行来替代 switch 的文章,进而给出了想当然的回复,非常不好意思,所以知耻后苦搜索相关的内容,在 ReactRally2017 视频中找到 David Khourshid - Infinitely Better UIs with Finite Automata 这个研报。David 在视频中详细分析了有限状态自动机在 UI 状态管理中的应用,并给出了自己的解决方案 。大家可以自行查找学习,我在这里只是给出个人对前端状态管理的理解和应用。

前端状态

redux 是 react 技术栈中的状态控制流框架,使用了标准的函数式思想,期望(强制)所有状态管理都是纯函数。这也意味着各状态之间都是独立的。但是有一类状态 redux 直接甩给了的第三方模块,副作用模块 redux-saga 也就成了任劳任怨的典型代表。副作用正是因为不确定性和可变性而得名,而其给出的状态又是相互影响,如何解耦使得原本复杂的非线性呈现为线性逻辑,正是有限状态自动机的用武之处。所以个人理解应在 saga 中使用状态管理。

简单实现

本人初学前端,下面实例和语句基本靠蒙未必正确,欢迎指正,特此声明。

首先给出应用环境: 登录流程。

登录流程

对应的代码如下:

const machineState = {  currentState: 'login_screen',  states: {    login_screen: {      login: 'loading'    },    loading: {      success: 'main_screen',      failure: 'error'    },    main_screen: {      logout: 'login_screen',      failure: 'error'    },    error: {      login: 'loading'    }  }}复制代码

因为在 saga 中应用,所以给出状态所对应 effects

function * mainScreenEffects() {  yield put({ type: SET_AUTH, payload: true })  yield put(NavigationActions.navigate({ routeName: 'Main' }))  yield put({ type: SET_LOADING, payload: { scope: 'login', loading: false } })}function * errorEffects(error) {  yield put({ type: REQUEST_ERROR, payload: error.message })  yield put({ type: SET_LOADING, payload: { scope: 'login', loading: false } })}const effects = {  loading: () =>    put({      type: SET_LOADING,      payload: { scope: 'login', loading: true }    }),  main_screen: () => mainScreenEffects(),  error: error => errorEffects(error),  login_screen: () => put({ type: SET_AUTH, payload: false })}复制代码

上述 effects 都是触发更新 UI 的 actions

最后编写有限状态自动机将状态和 effects 关联,借鉴的 redux:

const Machine = (state, effects) => {  let machineState = state  // 转换状态函数  function transition(state, operation) {    const currentState = state.currentState    const nextState = state.states[currentState][operation]      ? state.states[currentState][operation]      : currentState    return { ...state, currentState: nextState }  }  // 转换状态的接口  function operation(name) {    machineState = transition(machineState, name)  }  // 获取当前状态  function getCurrentState() {    return machineState.currentState  }  // 输出 effects  const getEffect = name => (...arg) => {    operation(name)    return effects[machineState.currentState](...arg)  }  return { operation, getCurrentState, getEffect }}export default Machine复制代码

实例应用

现在将上述的状态机应用在登录流程中:

const machine = Machine(machineState, effects)const loginEffect = machine.getEffect('login')const failureEffect = machine.getEffect('failure')const successEffect = machine.getEffect('success')export function * loginFlow() {  while (true) {    const action = yield take(LOGIN_REQUEST)    const username = action.payload.get('username')    const password = action.payload.get('password')    yield loginEffect()    try {      let isAuth = yield call(Api.login, { username, password })      if (isAuth) {        yield successEffect()        console.log(machine.getCurrentState())      }    } catch (error) {      yield failureEffect(error)    } finally {        // .......    }  }}复制代码

自我感觉现在状态管理的思路比以前清晰了,当然这也许是假象,还是请指正。结束前谢谢 的作者和译者。

转载于:https://juejin.im/post/5a002db36fb9a045240537d0

你可能感兴趣的文章
【HLOJ 559】好朋友的题
查看>>
Electric Fence(皮克定理)
查看>>
nvl 在mysql中如何处理
查看>>
MyEclipse 快捷键
查看>>
快速傅里叶变换FFT
查看>>
大数据常用基本算法
查看>>
JavaScript学习笔记(十三)——生成器(generator)
查看>>
hibernate保存失败
查看>>
MySQL增量订阅&消费组件Canal POC
查看>>
Sqlite多线程
查看>>
数据结构-时间复杂度
查看>>
对象与字符串相互转换
查看>>
[NOIp2017提高组]小凯的疑惑
查看>>
《C程序设计语言》练习1-5
查看>>
$\frac{dy}{dx}$ 是什么意思?
查看>>
Go开发之路(目录)
查看>>
RHEL6.5安装成功ORACLE11GR2之后,编写PROC程序出错解决方法
查看>>
(50)与magento集成
查看>>
Ubuntu设置python3为默认版本
查看>>
日期Calendar/Date的用法
查看>>