js 中的 flux & redux

Flux

Flux 是一种管理应用程序数据流的架构设计模式，强调单向数据流的概念。由四个部分组成，View Action Dispatcher 和 Store。

classDiagram
Store <|-- Dispatcher

View <|-- Store

Action <|-- View

Dispatcher <|-- Action
Dispatcher <|-- Action2

View

只读的使用来自 Store 的数据。响应事件，作出 Action

Action

被触发后选择调用 Dispatcher。

Dispatcher

调度分发，改变 Store 内的数据

• 每个 Store 都会收到 Action

Store

保存数据的地方，可以被 Dispatcher 改变，改变后发出更改事件。

对于使用的 View 来说，这个是只读的。

一个项目之中可以存在多个 Store

redux

• 单向数据流
• 单一数据源
• state 只读，每次状态更新之后只能返回一个新的 state
• 没有 Dispatcher，而是在 Store 中集成了 dispatch 方法
• 支持中间件

Vue.js 中简单 Store

Vue.js 中可以利用 reactive 响应性的特点构建简单的 Store 模式

import { reactive, readonly } from "vue";

const state = reactive({
  count: 1,
});

const readonlyState = readonly(state);

const actions = {
  add() {
    state.count++;
  },
};

export { readonlyState, actions };

classDiagram
state <|-- actions_add

actions_add <|-- View_add

View <|-- state

View_add <|-- View

这里利用 readonly 使得 View 中应用的数据变成只读的，只能通过导出的 actions 改变

Vuex

import { createStore } from "vuex";

const store = createStore({
  strict: true,
  state: {
    count: 123,
  },
  getters: {
    getCountStr(state) {
      return state.count + "元";
    },
  },
  mutations: {
    add(state) {
      state.count++;
    },
  },
  actions: {
    add3(context) {
      context.commit("mutations");
    },
  },
});

export default store;

classDiagram
View <|-- state

state <|-- mutations_add

 mutations_add <|-- actions_add3
 
 actions_add3 <|-- View_add
 
 View_add <|-- View

Pinia

import { defineStore } from "pinia";

const useTestStore = defineStore("test", {
  state: () => {
    return {
      count: 0,
    };
  },

  actions: {
    add() {
      this.count++;
    },
  },
});

export { useTestStore };

classDiagram
View <|-- state
state <|-- action
action <|-- View_add
View_add <|-- View

React 中的 useState

import './App.css';
import { useState } from 'react'

function App() {

  const [count, setCount] = useState(0)

  function add() {
    console.log('add')
    setCount(count + 1)
  }

  return (
    <div className="App">
      <div>{count}</div>
      <button onClick={add}>add</button>
    </div>
  );
}
export default App;

classDiagram
View <|-- useState_count

useState_count <|-- useState_setCount

useState_setCount <|-- View_add

View_add <|-- View

React 中的 React-Redux

还不会

参考链接:

• facebook flux 概念

思考

现有的状态管理是基于设计模式或者设计模式的变种，而状态管理的最终目的是为了将数据单向控制流动，把嵌套的用法拍平，达到易维护的目的

对于众多状态管理库，需要按需选择，避免为了用而用。觉得小范围的管理用 vue reactive 会比较清晰，这个可以单独使用

对于状态管理的设计模式还是要多看多理解。平时结合项目思考