Store, Redux 和 Mobx
前端數(shù)據(jù)流方案包括了 flux, redux 和 mobx. 在其中數(shù)據(jù)存儲的地方, 就叫做 store.
-
Redux:
- 參考這里
-
Mobx
- Mobx 是 flux 實現(xiàn)的后起之秀. 以更簡單的時候和更少的概念, 讓 flux 使用起來變得更簡單.
- 相比 Redux 有mutation, action, dispatch 等概念. mobx則更加簡潔, 更符合對store 增刪改查的操作概念.
Mobx 快速入門
通過下述的代碼, 我們可以完成一個 react-mobx 實現(xiàn)的計數(shù)器. 點擊這里查看實際效果.
安裝依賴項: mobx, mobx-react
npm i mobx mobx-react
定義observable, observer 和 action
- 定義一個狀態(tài)對象, 它具有可觀察的屬性, 我們將它稱為 observable
- 首先我們需要定義一個狀態(tài)對象
- 將其轉(zhuǎn)化為可觀察狀態(tài)
- 將狀態(tài)對象傳遞給 mobx observable()
import {observable} from 'mobx';
let appState = observable({
timer: 0
});
- 創(chuàng)建一個react組件, 它能夠響應(yīng) observable 的變化, 我們將它稱為 observer
- 創(chuàng)建一個 React 組件.
- 將其轉(zhuǎn)化為 響應(yīng) observable 的組件
- 使用 mobx-react observer() 來包裹它.
let App = observer(({ appState }) => {
return (
<div className="App">
<h1>Time passed: {appState.timer}</h1>
</div>
);
});
- 定義更改狀態(tài)的函數(shù), 我們將它稱為 action
- 創(chuàng)建一個函數(shù)來更改 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);
