Effector in four articles.

omgpiu — Mon, 05 Sep 2022 18:22:58 +0000

About 1 year ago I met effector - a new state manager for me.
It was a medium sized project for a large company to evaluate employees with many forms and activities.
I heard a little about this tool. Also watched a video on Youtube ( there was only one ). That was't enough.
I remember my struggling with Effector. I couldn't understand what’s going on, a lot of new words such as sample, clock , source , event, effect….

Everything changed when I saw the video with Sergey Sova. There were many interesting hints, but the main thing is that the effector is a flow. Flow actions and data. Change your mind from redux paradigm, forget it for a while.

I imagined that effector is a road, and said my self - work with effector like a road builder makes a road. Each road is one line of effector actions.

Traffic light like an event, crossroad like a sample, parking like a store, etc.
From that time I didn’t have any problems with this amazing tool.
I hope, my article series will help you to start or even try it out.

No more counters and TODO.
I will show four lessons. Start from scratch to medium level logic.

All lessons you can find in my repo.

Let's begin.

Events and stores in simple way

Before we get into it

There are few things you better look throw in effector and patronum docs :

Let's start our journey with a small component. Usually for similar logic you better use hooks, but for learning stuff we are going to use effector instead.

Task

Create a component with stars.
Stars must change their color when we hover them.
Stars must change their color according chosen rating.

First step

Here we create a store by createStore for hoveredRating and give an initial value for it.
Best practice is to start store's name with $ sign.
We can add types for store value or store shape.

export const $hover = createStore<number>(0, {
  name: 'hover'
})

Second step

Now it's time to create an event by createEvent. Simply speaking, event is a function with or without payload. Events work as triggers to start chain of actions. TS will help us to understand do we need payload or not. I gave a payload as a number and now, when I'm going to use this event, it's waiting for payload as a number.

export const setHoveredRating = createEvent<number>()

Third step

This is magic time - connect our event to store. Let's try to understand - what's going on here?

$hover.on(setHoveredRating, (_, rating) => rating)

Connected our $hover (store) with setHoveredRating (event), and when we fire event our store will change.
Pass callback as second argument in .on method.

This callback has two arguments - state and event payload. If we don't need store data, we name first argument as underscore ('_')

When we call setHoveredRating with some payload, our store will change.
You can do any logic, but remember our callback MUST BE A PURE FUNCTION.

Must to know

If you trigger any event with the same payload
(oldState === payload from event), state will NOT change and will not UPDATE.
If you pass undefined to store, store will NOT change and will not UPDATE.

What we've done?

Created a store
Created an event
Connect the event with the store.

In the next lesson we are going to work with API, use tool instead of useEffect etc.

See you in next the article.