React에 Redux 대신 Effector를 써보자!

React에 Redux 대신 Effector를 써보자!

"Effector"가 react-material-ui-datatable에서 사용되는 것을 보고, 이것은 무엇일까 싶어서, 한번 훌터봤다.

개인적인 소감으로는 Redux보다 훨씬 직관적이고, 코드(파일 구성 및 코드 생성)가 간결했다.

우선, Redux로 counter 예제를 구현했다.

같은 코드를 Effector로 구현했다.


동작 상황을 확인하기 위해,  Redux에는 reducer에 console 로 log를 출력했다.
대신, Effector에는 "watch"를 이용하여 출력했다.
이부분도 훨씬 간결하다. (혹시, Redux 출력이 잘못이라면, 지적 부탁한다.)

코드를 보자면,

"event 생성 -> store 생성, 필요하면 watch -> component에 event 등록"으로 이뤄져 있고, Redux 대비, 파일의 분화, store의 추적 등이 용이합니다.

import React from "react";

import { createEvent, createStore } from "effector";

import { useStore } from "effector-react";

const increment = createEvent("increment");

const decrement = createEvent("decrement");

const resetCount = createEvent("reset count");

const counter = createStore(0)

.on(increment, count => count + 1)

.on(decrement, count => count - 1)

.reset(resetCount);

counter.watch(count => console.log("count", count));

// counter: 0

increment.watch(() => console.log("increment"));

decrement.watch(() => console.log("decrement"));

resetCount.watch(() => console.log("reset count"));

const Counter = () => {

const count = useStore(counter);

return (

<>

<div>Count: {count}</div>

<button onClick={increment}>+</button>

<button onClick={decrement}>-</button>

<button onClick={resetCount}>reset</button>

</>

);

};

둘의 가장 큰 차이는,

Redux는 전에 하나의 store를 전체 state를 관리해야 한다.
Effector는 여러개의 store를 생성하고 관리할 수 있다.

정도다.

참고,

https://dev.to/lessmess/why-i-choose-effector-instead-of-redux-or-mobx-3dl7