redux mobx
mobx + reactjs 사용
사용
설치
- Installation · MobX
npm install --save mobx
MobX 6 부터는 javascript 와의 호환성을 위해 decorator들을(@observable 등) 없앴다고 한다.
React 에서 사용하기
- React integration · MobX
- React class bindings for MobX
-
React integration · MobX > tips
-
mobx-react-lite에는 class 를 observer 로 만드는 기능이 빠져있다.
-
예제
- observer 는 observable 을 바라보고 있다가 observable 이 변하면 반영을 하게 된다.
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"
class Timer {
secondsPassed = 0;
sm = 0;
constructor() {
makeAutoObservable(this);
}
increaseTimer() {
this.secondsPassed += 1;
this.sm += 2;
}
}
const myTimer = new Timer();
setInterval(() => {
myTimer.increaseTimer();
}, 1000);
// A function component wrapped with `observer` will reacts to any
// future change in an observable it used before
// functional version
//
// const TimerView = observer(
// ({ timer }: { timer: Timer }) => (
// <div>
// <span>Seconds passed: {timer.secondsPassed}</span>
// <span>Seconds passed: {timer.sm}</span>
// </div>
// ));
type TimerViewProp = {
timer: any
}
const TimerView = observer(
class TimerView extends React.Component<TimerViewProp> {
render() {
const { timer } = this.props
return (
<div>
<span>Seconds passed: {timer.secondsPassed} </span>
<span>Seconds passed: {timer.sm} </span>
</div>
)
}
}
)
ReactDOM.render(<TimerView timer={myTimer} />, document.body);redux 대비 mobx 의 장점
- 반복되는 code 가 적다. redux 는 reducer, actions, containers, components 를 계속해서 만들어야 한다.
- 그래서 build time 이 줄어든다.
- 배우기 쉽다.(learning curve 가 낮다.)
Mobx의 state 은 mutable 이다. Redux 가 함수들이 pure function 일때 scale 하기가 용이하다.
vs Redux
특정 test 에서 mobx 가 redux 보다 더 빠르다고 나온다.
