前端:从状态管理到有限状态机的思考

View = ViewModel(Model);
// 视图 =  状态 + 管理
复制代码

const stateTool = {
  // 当前状态
  currentState: '1',
  
  // 状态转变函数
  transition: (event) => {
  switch(event.type) {
      case '1': {
        this.currentState = event.status;
        doSomething1();
        break;
      }
      case '2': {
        this.currentState = event.status;
        doSomething2();
        break;
      }
      case '3': {
        this.currentState = event.status;
        doSomething3();
        break;
      }
      default: 
        console.log('Invalid State!');
        break;
    }
  }
}
复制代码

// 以下代码就实现了一个能够穿透组件的状态管理
import React, { useReducer, useContext } from 'react';

const reducer = (state = 0, { type, ...payload }) => {
  switch (type) {
    case 'add':
      return state + 1;
    case 'desc':
      return state - 1;
    default:
      return state;
  }
}

const Context = React.createContext();
const Parent = () => {
  const [state, dispatch] = useReducer(reducer, 0);
  return (
    <>
      <Context.Provider value={{ state, dispatch }}>
        <Son />
      </Context.Provider>
    </>
  )
}

function Son() {
  return <Counter />
}

function Counter() {
  const { state, dispatch } = useContext(Context);
  return (
    <div>
      <button onClick={() => dispatch({ type: 'desc' })}>-</button>
      {state}
      <button onClick={() => dispatch({ type: 'add' })}>+</button>
    </div>
  )
}
export default Parent;
复制代码

// Parent.vue
<template>
  <Son />
</template>

<script setup>
import { provide, reactive, readonly } from "vue";
import Son from "./Son.vue";
const data = reactive({
  count: 0,
});
const onAdd = () => {
  data.count++;
};
const onDesc = () => {
  data.count--;
};
provide("store", {
  data: readonly(data), // 只读属性
  onAdd, // 修改函数add
  onDesc, // 修改函数desc
});
</script>

复制代码

// Son.vue
<template>
  <Counter />
</template>

<script setup>
import Counter from "./Counter.vue";
</script>
复制代码

// Counter.vue
<template>
  <div>
    <button @click="store.onDesc">-</button>
    {{ store.data.count }}
    <button @click="store.onAdd">+</button>
  </div>
</template>

<script setup>
import { inject } from "vue";
const store = inject("store", {}); // 穿透读取store
</script>
复制代码

import { Machine } from 'xstate';

// 创建状态机
const promiseMachine = Machine({
  id: 'promise', // 唯一id
  initial: 'pending', // 初始化状态
  states: { // 状态集合
    pending: {
      on: {
        RESOLVE: 'resolved',
        REJECT: 'rejected',
   }
    },
    resolved: {
      type: 'final',
    },
    rejected: {
      type: 'final'
    }
  }
})
复制代码

import { interpret } from 'xstate'
const promiseService = interpret(promiseMachine).onTransition(state => 
  console.log(state.value)
) // 创建服务，指定状态转移时回调函数
promiseService.start() // 启动服务
promiseService.send('RESOLVE'); // 通知服务转移状态，并执行回调函数
复制代码

import { action, autorun, observable } from 'mobx'
import { observer } from 'mobx-react'
import React from 'react'

const appStore = observable({ // 建立store
  count: 0,
  age: 18,
})

// autorun 只会观察依赖的相关数据
// 使用当appStore.age更新时，才会触发该函数
autorun(() => {
  // doSomething();
  console.log('autorun', appStore.age);
})

const Counter = observer(() => {
  const { count } = appStore;
  const onAdd = action(() => { // 使用action更新store数据
    appStore.count++;
  })
  const onDesc = action(() => {
    appStore.count--;
  })
  return (
    <div>
      <button onClick={onDesc}>-</button>
      {count}
      <button onClick={onAdd}>+</button>
    </div>
  )
})

export default Counter;
复制代码