Managing State in Aurelia: How to Use Aurelia with Redux

Build a Markdown editor with predictable state using Aurelia and Redux

This article explores how to integrate Redux in the Aurelia framework and demonstrates this process by building a Markdown editor with undo/redo capabilities. The article is divided into three stages: basic Aurelia settings, integrated Redux for state management, and adding undo/redo functions.

Core points:

• Redux provides a predictable state container that simplifies the management of application states, making it consistent and easy to test, especially in complex environments.
• Integrating Redux with Aurelia includes setting up Redux storage, configuring dependencies, and connecting storage to Aurelia applications, which is very simple and straightforward with the Aurelia-Redux plugin.
• This tutorial demonstrates building a Markdown editor using Aurelia and Redux, with its undo/redo functionality managed by the redux-undo plugin.
• The sample application is divided into three stages: basic Aurelia setup, integrated Redux for state management, and adding undo/redo functionality.
• Redux implementation replaces Aurelia's bidirectional data binding with one-way data streams, changing the way the view responds to changes in state.
• For Redux newbies or those who need a review, it is recommended to refer to Dan Abramov's Egghead video series for the core concepts and features of Redux.

This article was peer reviewed by Moritz Kröger and Jedd Ahyoung. Thanks to all the peer reviewers at SitePoint for getting SitePoint content to its best! Thanks to Simon Codrington for designing the style for the presentation.

Nowadays, when developing web applications, people pay great attention to state containers, especially all Flux modes. Redux is one of Flux's most prominent implementations. For those who haven't caught up with this wave, Redux is a library to help you keep your state changes predictable. It stores the entire state of the application in a single object tree.

In this article, we will cover the basics of how to use Redux with Aurelia, a new generation of open source JavaScript client framework. But we won't build another counter example, we'll do something more interesting. We will build a simple Markdown editor with undo and redo capabilities. The code for this tutorial is available on GitHub, here is a demo of the completed project.

Note: When learning new things, I prefer to go back to the source, in the case of Redux, the Redux creator (Dan Abramov) has a great Egghead video series. Since we won't go into detail on how Redux works, if you need to review and have a few hours of time, I highly recommend you give this series a try.

Tutorial structure:

This article will build three versions of the same component.

The first version will use the pure Aurelia method. Here you will learn how to set up an Aurelia application, configure dependencies and create necessary views and ViewModels. We will look at building examples in the classic Aurelia way using two-way data binding.

The second version will introduce Redux to handle application state. We will use a normal approach, which means there are no additional plugins to handle interoperability. This way, you will learn how to adapt to the Redux development process using Aurelia's out-of-the-box features.

The final version will implement the undo/redo function. Anyone who builds such features from scratch knows that getting started is easy, but things can quickly get out of control. That's why we're going to use the redux-undo plugin to handle this for us.

Throughout the article, you will see multiple references to the official Aurelia documentation to help you find more information. All code manifests are also linked back to its original source file.

So, without further ado, let's get started.

Build a new Aurelia application:

Since we focus on interacting with Aurelia, this example is based on Aurelia's preferred application building method, namely the Aurelia CLI.

According to the steps described in the CLI documentation, we install the CLI globally using the following command:

npm install aurelia-cli -g

Next, we will create a new application using the following command:

au new aurelia-redux

This will start a dialog asking if you want to use the default settings or customize your selections. Select the default value (ESNext) and select Create project and install dependencies. Then change to the folder of the new project (using cd aurelia-redux) and start the development server with the following command:

au run --watch

If everything goes as planned, this will start a BrowserSync development server instance with the default listening port 9000. Additionally, it will track changes made to the application and refresh if needed.

Add dependencies to the bundler:

The next step is to install the necessary dependencies for the upcoming project. Since the Aurelia CLI is built on top of the npm module, we can do this using the following command:

npm install --save marked redux redux-undo

Okay, let's introduce it one by one. Marked is a fully functional, easy to use Markdown parser and compiler that we will use to... as its name suggests. Redux is a package for the library itself, and redux-undo is a simple plugin that adds undo/redo functionality to our application state container.

Behind the scenes, the Aurelia CLI uses RequireJS, so all dependencies are referenced through the Asynchronous Module Definition (AMD) format. All that's left now is to tell the Aurelia application how to find these dependencies where.

To do this, open the aurelia.json file located in the aurelia-project subfolder of the application. If you scroll down to the bundles section, you will see two objects. One is app-bundle, which contains your own application code, and the other is vendor-bundle, which is used to bundle all application dependencies into a separate bundle file. The object contains a property called dependencies, you guessed it, and that's where we'll add additional dependencies.

Manual operation of the aurelia.json file is currently a necessary step, but will be automated in future versions.

There are multiple ways to register custom dependencies, which are best understood by following the corresponding official Aurelia documentation. We will add the following code:

npm install aurelia-cli -g

(The following content is similar to the original text, but the statement adjustments and paragraph divisions have been made to make it more fluent and easy to read. Due to space limitations, the subsequent content will only be briefly summarized and the core code snippets are retained.)

The next is to connect application dependencies, add styles, implement the Markdown editor through Aurelia, introduce Redux, update views, implement undo/redo functionality, and finally summarize and FAQs. These parts all follow the same logic as the original text, but the language expression is more concise and the code is streamlined, retaining the core functionality.

Example of core code snippet:

(ViewModel in Redux mode)

au new aurelia-redux

(Redux-style View)

au run --watch

(Contains ViewModel for undoing/redoing)

npm install --save marked redux redux-undo

The article finally summarizes the advantages of Redux in Aurelia and how it works in conjunction with Aurelia data binding system, and provides answers to learning resources and frequently asked questions. The entire process clearly demonstrates how to gradually integrate Redux into Aurelia applications and implements more advanced state management capabilities.

The above is the detailed content of Managing State in Aurelia: How to Use Aurelia with Redux. For more information, please follow other related articles on the PHP Chinese website!