Typescript-React State Management With Easy Peasy

React state management is often tedious, what with boilerplate setup and complicated configurations. However, you can streamline state management with the Easy Peasy dependency.

What is Easy Peasy?

The Easy Peasy library handles state management in applications. It’s an abstraction of Redux, which means that it is built on Redux but focuses on the crucial APIs that a developer requires. Easy Peasy state management, 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.

Pros of Using Easy Peasy for React State Management

• It requires zero configuration and has a boilerplate to set up the state.
• It provides all of Redux’s features, 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 a selected component. The local stores are for specific components, and can replace useState.
• Easy Peasy supports computed properties, allowing you to create a state from an operation performed on another state.

For more on Easy Peasy Redux, you can check its official website.

Cons of Using Easy Peasy for React State Management

Easy Peasy has many advantages, but we should consider some tradeoffs of integrating the React state management library into your application.

• It is bound to Redux and the features that Redux has to offer.
• It increases the bundle size of applications due to its additional dependencies.
• You must know Redux in order to use it for React state management.

Getting Started with Easy Peasy

Let’s look at the parts of Easy Peasy you need to understand to use the library.

Store

The store holds all of 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

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 like so:

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

Thunks are actions used to handle side effects, e.g., HTTPS requests.

In the code block above, we have a thunk "fetchUserName" that accepts 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.

Hooks and Typing Hooks

Easy Peasy comes with a few custom hooks that help use its features or access the store:

• useStoreState hook: allows you to access the store states from your components
• useStoreAction hook: grants you access to the actions in the store
• useStore: enables you to access the store instance

You can check out the documentation for additional information on the custom hooks and how to use them for React state management.

When using React-Typescript, you need to type the hooks to have the store model type. We can achieve this with the createTypedHooks function.

In the code block above, we call the createTypedHooks function with the store model passed as type and assigned to the typedHooks variable. Then, 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 following section, we will build a simple React to-do list application that uses Easy Peasy for React state management and persisting state. The application features include adding a new list item, editing existing list items, and deleting existing items. We will not use Easy Peasy thunks, as the application requires no side effects.

Project Setup

First, we’ll create a new React-Typescript app using the create-react-app CLI tool.

The command above creates a new React typescript application. Then, we’ll install the Easy Peasy dependency and Bootstrap to style 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:

In the code block above, we have the ITodo interface as the model interface. This has an items state, a setItem Action that accepts a string as its payload, a removeItem Action that accepts a string as its payload, and an updateItem Action that accepts the IItem type as its payload.

Next, we 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 that accepts an object with id and the new item value as its arguments.

In the previous section for React custom hooks, we covered how to type Easy Peasy hooks. We repeat this for the useStoreActions and useStoreState hooks in the hooks folder.

We’ll need to create the store for React state management. 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. Then, we 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 Management

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 cast the type for the StoreProvider component from the code block and setting the prop type for children to React.ReactNode. Then, 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 for React Typescript State Management

We have completed the setup for Easy Peasy and integrated the store into the application, so it’s accessible from every component. The following action will use the state and actions from the store to get the application working.

To use the store state in the application component, we call the useStoreState hook.

The code block demonstrates how the useStoreState hook accesses the items state from the Content component. The items variable maps through the TodoItem and passes the item value and the id to the component props.

Items state:

Finally, we 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’ll call the addNewItem variable and then pass the parameter.

Updating Existing Item

This action will update an existing item with a new value. It’s 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 for React state management. Also, you can test the live app for the project here or browse the Github Repository.