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?

How about a declarative of the state with no hassel?

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

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.

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

not too shabby. More on the typescript API https://easy-peasy.now.sh/docs/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.

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.

To see the full code snippet visit: https://dev.to/itminds/a-game-of-states-33f 

Talk about full circle!

Easy Peasy https://easy-peasy.now.sh/
- Typescript tutorial https://easy-peasy.now.sh/docs/typescript-tutorial/
- Typescript API https://easy-peasy.now.sh/docs/typescript-api/