So what is Effector ?

Nowadays frontend applications builds with using redux(rtk)/mobx state-managers because they modern and hype trends.

Effector it is the another way to create state and business logic for your frontend application.

In this article I just want introduce you with effector!

How to use

Effector has three main units: stores, effects, events.

Seems simple ? But not everything is as simple as it seems :)

Stores

Store is an object which stores the state value.

You can create store using createStore(initialState)

const $store = createStore(1);

Now we have $store with numeric state, which has value 1

Events

Event is a simple function with one argument which returns this argument, but also this unit prepared for another effector operations (will be mentioned below). Better to think that this is intention to change the state.

You can create event using createEvent(name?)

const setState = createEvent<number>()

Now we have setState event with numeric payload

Effects

Effect is a container for async function. If we will compare it with redux toolkit, we can relate this unit to async thunk.

Effects in Effector are used to create and handle async operations or side effects

You can create effect using createEffect(handler)

const sendStateToServerFx = createEffect(async (state: number) => {  const response = await fetch('/server', {    method: 'post',    body: state  })})

Now we have sendStateToServerFx effect with numeric payload

Let's to sum up that we had managed to create

const $store = createStore(1);const setState = createEvent<number>();const sendStateToServerFx = createEffect(async (state: number) => {  const response = await fetch('/server', {    method: 'post',    body: state  })})

How to connect it all together ?

Effector has a lot of methods to work with data flow, but in this article we will try to use only one sample method

import { sample } from "effector"

sample it is universal multipurpose method to work with data flow

Now we need to put value from setState payload to $store store

sample({  source: setState,  target: $store,})

This operation says "when source will be called, take value from source and send it to target"

Now if we call setState(100) then $store will have value 100 in state

Now we need send $store value to server when it will be changed

sample({  source: $store,  target: sendStateToServerFx,})

Two samples, but what if we can create only sample ? Let's try

sample({  source: setState,  target: [sendStateToServerFx, $store],})

But what if we need to prevent this changes when sendStateToServerFx is in pending state (request is calling/response is fetching)

sample({  source: sendStateToServerFx.pending,  clock: setState,  filter: (pending, value) => !pending,  fn: (pending, value) => value,  target: sendStateToServerFx,})

This operation says "when clock will be called, take value from source and send it to the filter. If filter returns true then call fn and returned value from fn send to target, otherwise skip fn and target steps"

I think now sample looks a little more complicated than it used, but it is very powerful!

Here is a link to effector playground to check this code

So, let's connect this to React

import { FC } from "react";import { useUnit } from "effector-react";const MyComponent: FC = () => {  const state = useUnit($store)  return (    <div>      <button onClick={() => setState(state - 1)}>       -1      </button>      <span>      {state}      </span>      <button onClick={() => setState(state + 1)}>       +1      </button>    </div>  )}

Now we have made the basic counter with one specific thing - safety sending counter data to server

What about size?

Core library package has 10.4KB gzipped size (bundlephobia)


React bindings package has 3.7KB gzipped size (bundlephobia)

Summarize

Effector has a lot of methods to create data-flow in your frontend application (attach, combine, merge, restore, guard, forward etc).

Using this library you can declare all business logic for your frontend application. Even complex cases.

You can separate UI-logic from business logic with using this library.

Currently many companies actively use the effector as data-flow\state manager in their own frontend applications.

I hope you will try this powerful tool

Thanks for reading, good luck!