TECH Insights

Viden og indsigter fra IT Minds' it-talenter

A game of states

Skrevet af Mindster og Software Developer hos IT Minds on 13-11-19 11:48
Mindster og Software Developer hos IT Minds

Twas a cold winter morning, among the fields the actions was slowly waking up.
"Sire, it is never fast to start up". The sire knew, however he did not know of any alternatives.
"I just wish it was easy" said peasy, the sire and dispatched a thunk to fetch some milk.

Easy-Peasy state management in React

There are many state management solutions out there for React. Some of them good, and some of them great.
In this article I will tell you a little bit about easy-peasy. Why I think this state management library is amazing.

I remember looking at svelte and thinking, damn, I wish global state in react could be one line as well.
But alas, twas not.
I write all my frontend code in TypeScript. It has its strengths definitely, but it does indeed have weaknesses as well. Redux is in and of itself a decent state management lib. The tooling around redux however, is legendary. (Here I am mainly talking about the redux-devtools).
But the sheer lines of boilerplate code that goes into a redux action is insane.

How about just writing 9 lines for a new state branch in a single file?

Screenshot 2019-11-13 at 11.37.22

How about a declarative of the state with no hassel?

Screenshot 2019-11-13 at 11.37.54

What about just using hooks to get the state you want?

Screenshot 2019-11-13 at 11.38.29

Very good, but I can already do that with ...

Let's get one thing clear, we can do everything with anything. However our perception of the thing differs from tool to tool.

Let's talk about attacks on the kingdom?
An asynchronous action in Easy-Peasy is called a thunk. In the Kingdom a raid would be a thunk.
You will send your soldiers to attack, and they would return at some point, and when they do, we need to pay them dollar bills.

Let's build upon the store.

Screenshot 2019-11-13 at 11.39.05

The kingdom would be an array of countries, and the army an array of soldiers.
The thing to notice here is that the attackCountry is an asynchronous action (thunk), and when that has run, it will add the country (if you won the war) to the array of countries in the kingdom. When this action has run, we have added a listener (paySoldiers), which will then run its own code.

However the types from above are not immediately apparent and in my own opinion using typescript makes code more self documenting.

Typing easy-peasy is not hard, if you take time to read their API.

Let's type the warfare module

Screenshot 2019-11-13 at 11.39.51

not too shabby. More on the typescript API

Last, but not least, Easy-Peasy has an injection system which enables you to inject different things into your thunks. Perfect for dependency injecting a network api, for even creating a repository patteren for your network layer, and disconnect your code from networking.

Networking at parties like it's 1399

War changes. And therefore Peasy, the sire must be prepared with a functional store model, open for changes in.

Screenshot 2019-11-13 at 11.40.29

And just like that we have created a little repository pattern like injection into our store. And as long as we adhere to our interface, the Kingdom will be flexible in its networking.

Let's remake our warfare module to use the injected api.

Screenshot 2019-11-13 at 11.44.51

To see the full code snippet visit: 

Talk about full circle!

Easy Peasy
- Typescript tutorial
- Typescript API

Insights fra de bedste softwaretalenter

En del af IT Minds’ DNA er, at vi spotter og tiltrækker de bedste softwaretalenter, som er stærke i de nyeste teknologier og frameworks. Derfor vil vi gerne dele ud af vores viden og erfaringer vores konsulenter opsamler, når de afprøver og arbejder med nye teknologier og frameworks.

Seneste indlæg