Store, Redux 和 Mobx

• 前端数据流方案包括了 flux, redux 和 mobx. 在其中数据存储的地方, 就叫做 store.

• Redux:

  • 参考这里

• Mobx

  • Mobx 是 flux 实现的后起之秀. 以更简单的时候和更少的概念, 让 flux 使用起来变得更简单.
  • 相比 Redux 有mutation, action, dispatch 等概念. mobx则更加简洁, 更符合对store 增删改查的操作概念.

Mobx 快速入门

通过下述的代码, 我们可以完成一个 react-mobx 实现的计数器. 点击这里查看实际效果.

安装依赖项: mobx, mobx-react

npm i mobx mobx-react

定义observable, observer 和 action

• 定义一个状态对象, 它具有可观察的属性, 我们将它称为 observable
  • 首先我们需要定义一个状态对象
  • 将其转化为可观察状态
    • 将状态对象传递给 mobx observable()

import {observable} from 'mobx';

let appState = observable({
    timer: 0
});

• 创建一个react组件, 它能够响应 observable 的变化, 我们将它称为 observer
  • 创建一个 React 组件.
  • 将其转化为 响应 observable 的组件
    • 使用 mobx-react observer() 来包裹它.

let App = observer(({ appState }) => {
    return (
        <div className="App">
            <h1>Time passed: {appState.timer}</h1>
        </div>
    );
});

• 定义更改状态的函数, 我们将它称为 action
  • 创建一个函数来更改 observable.
  • 使用 mobx action来包裹它.

setInterval(action(()=>{
  appState.timer +=1  
}), 1000) 

完整代码

import React from "react";
import ReactDOM from "react-dom";
import { observable, action } from "mobx";
import { observer } from "mobx-react";

// create State object
let appState = observable({ timer: 0 });

// define action
setInterval(
    action(() => {
        appState.timer += 1;
    }),
    1000
);

appState.resetTimer = action(() => {
    appState.timer = 0;
});

// create observer
let App = observer(({ appState }) => {
    return (
        <div className="App">
            <h1>Time passed
: {appState.timer}</h1>
            <button onClick={appState.resetTimer}>reset timer</button>
        </div>
    );
});

const root = document.getElementById("root");
ReactDOM.render(<App appState={appState} />, root);

参考

https://mobx.js.org/intro/overview.html