State management in applications is often tedious when you worry about boilerplate setup and complicated configurations. However, you can skip the complicated configuration and boilerplate with the Easy Peasy dependency.
What is Easy Peasy?
The Easy Peasy library handles state management in applications; it is an abstraction of Redux, which means that it is built on Redux but focuses on the crucial APIs that a developer requires. Easy Peasy, as the name suggests, allows you to easily set up state management for your application with zero configuration while providing the architectural leverage that Redux offers.
Advantages of using Easy Peasy.
Easy Peasy has many advantages, but we should consider some tradeoffs of integrating the library into your application.
- It is bound to Redux and the features that Redux has to offer.
- Increased bundle size due to additional dependencies from Easy Peasy
- Knowledge of Redux is vital in some aspects of using Easy Peasy; an example of this situation comes into play when you need to set up a custom configuration for Easy Peasy.
Pros of using Easy Peasy
- It requires zero configuration and has a boilerplate to set up the state.
- It provides the features Redux offers, including state persistence and Redux middleware support.
- Easy Peasy provides support for global, context, or local stores: The global store is accessible everywhere in your application, while a context store is accessible to the selected component. The local stores are stores for specific components; they can substitute useState.
- Easy Peasy supports computed properties; this allows you to create a state from an operation performed on another state.
- Redux Developer tools support.
There are a couple of pros to using Easy Peasy; for more information on this, you can check its official website.
Getting started with Easy Peasy
We will look at the parts of Easy Peasy you need to understand to get you started using the library.
The store holds all the actions and states for the application. The Easy Peasy store's structure is on model/object definition; they contain the states and all actions that act on the state.
The code block above demonstrates how to create a store using the createStore method from Easy Peasy. The createStore method accepts two parameters, the store model and an optional configuration for the store. You can find additional information on the Easy Peasy store and its properties here.
Actions are triggered to mutate the state in the store. Easy Peasy has an Action type that accepts two types as parameters; the model and the payload. The payload parameter for the Action type is optional.
The code block above demonstrates the typing for actions with the updateName action; we pass the IModel interface as the first parameter and a payload with a type string.
Actions are defined using the "action" function, encapsulating a function with the model state and payload as arguments. For example, you can define actions in your model as thus:
The action above accepts a string as a payload to update the name state on the model.
NB: You should not destructure the state in your actions, as this will prevent the state from being updated.
Thunks are actions used to handle side effects, e.g., HTTPS requests.
From the code block above, we have the type for a thunk "fetchUserName" using the Thunk type that accepts the model type as a first parameter and payload type as an optional second parameter. The thunk function allows us to use asynchronous requests and access the model actions. The thunk function calls a function with the model actions passed as a first argument and the payload for the thunk as a second argument.
Hooks and Typing Hooks
Easy Peasy comes with custom hooks that help use its features or access the store:
- useStoreState hook: This allows you to access the store states from your components.
- useStoreAction hook: This grants you access to the actions in the store:
- useStore: This enables you to access the store instance.
You can check out the documentation for additional information on the hooks and how to use them.
When using React-Typescript, you need to type the hooks to have the store model type. We can achieve this with the createTypedHooks function.
From the code block above, we call the createTypedHooks function with the store model passed as type and assigned to the typedHooks variable; we move on to export reassigned typed version of the hooks. Finally, we will go on to use the typed hooks in the application:
In the next section, we will build a simple React to-do list application that uses Easy Peasy for state management and persisting state. The application features include adding a new list item, editing existing list items, and deleting existing items. Again, we will not use Easy Peasy thunks, as the application requires no side effects.
The following action will be to set up the project and install all necessary dependencies. Firstly, we will create a new React-typescript app using the create-react-app CLI tool.
The command above will create a new React typescript application, and then we will install the Easy Peasy dependency and bootstrap for styling the application.
Setting Up The Store
In the src folder, we will create a folder called store with this structure:
Once we have the file structure for the store set in the interface file, we have the types for our model:
From the code block above, we have the ITodo interface as the model interface; this has an items state, setItem Action that accepts a string as payload, removeItem Action that accepts a string as payload, and updateItem Action that accepts the IItem type as payload.
Following this, we will need to set up the model. In the model file, we will create the model object:
The code block above represents the model for our store. The model includes:
- The items state with one default to-do item
- A setItem action that accepts a new item as an argument and creates an id for the new to-do item
- A removeItem action that filters out the id of the item passed in as an argument to the action
- A updateItem action accepts an object with id and the new item value as an argument.
In the previous section for hooks, we covered how to type Easy Peasy hooks; we repeat this for the useStoreActions and useStoreState hooks in the hooks folder.
We will need to create the store for state management, and we handle this in the index.ts file:
In the code block above, we create a new store by calling the createStore function with the type StoreModel. Next, we will call the persist function with the model passed as a parameter; this will persist the store in sessionStorage. Check the documentation for more information on extensively using the persist function.
Integrating Easy Peasy state to application.
To integrate the store into our app, we must wrap the application within the StoreProvider component from Easy Peasy.
NB: If you are using React 18, you will need to cast the StoreProvider component; this will override the type error for children. You will also need to disable React.StrictMode in the index.tsx file.
We are casting the type for the StoreProvider component from the code block and setting the prop type for children to React.ReactNode. In the app function, we wrap the application in the StoreProvider component with the store props accepting the store created as value. Finally, the useStoreRehydrated hook checks for the persisted data and rehydrates the state with the data found.
Using Easy Peasy in the application
We have completed the setup for Easy Peasy and integrated the store into the application, so it is accessible from every component. The following action will be to use the state and actions from the store to get the application working.
To use the store state in the application component, we will call the useStoreState hook.
The code block demonstrates how the useStoreState hook access the items state from the Content component; the items variable maps through the TodoItem with the item value and id passed to the component props.
Finally, we will need to set up the actions for the application.
Adding New Item
The setItem action adds a new to-do item to the items array in the store; it accepts a string as a parameter.
The code block above demonstrates how we can access actions from the store using the useStoreActions hook; we will call the addNewItem variable and pass the parameter.
Updating Existing Item
This action will update an existing item with a new value. It is achieved by calling the updateItem action and passing an object with the id of an existing item and the value of the new item.
Removing Existing Item
Removing an item is achieved using the removeItem action from the store, which accepts the item's id to remove from the items array.
Conclusion and Project Resources
This article covered what Easy Peasy is and how to set up Easy Peasy for your React-typescript application. We also got to see how we can properly type Easy Peasy store when working with typescript. You can check out the official documentation for additional information on how you can use Easy Peasy. Also, you can test the live app for the project here or browse the Github Repository.
Become More Productive Writing Your React Apps
Every component you create in React often requires tons of repetition no matter what you do, and across every frontend project, there are always custom setups and best practices teams follow. Pieces helps you solve this for any React project by allowing you to create a local micro-repository where you can store any code snippets along with relevant metadata straight on your machine. Additionally, Pieces makes it incredibly easy to share your snippets with others, form collections to onboard others onto a project, and even has integrations to allow you to use your snippets directly in your IDE. Our team of developers are making changes everyday to make the most effective and efficient micro-repo for you.