React has become very popular as a UI layer, but there doesn’t appear to be a clearly proven best practice for the state management.
While Redux has become the most popular central state management solution, it’s often very verbose with a huge learning curve. In this post, we’ll explore a react + antd + umi + dva stack which makes it easy to create scalable web apps with cleaner architecture for data flow and state management.
Ant Design for React is a UI library that contains a set of high quality components for building rich, interactive user interfaces.
In real project development, you need a data flow solution like Redux or MobX. Ant Design React can also be used with any data flow solution and application framework within the React ecosystem. They have launched dva based on Redux, as well as a pluggable enterprise application framework umi, which is recommended for use in your projects.
Dva is a lightweight data flow solution based on Redux. The concept comes from elm. It supports side effects, hot module replacement, dynamic loading, react-native, SSR, etc. It has been widely used in production.
And umi is a routing-based framework that supports next.js-like conventional routing and various advanced routing functions, such as routing-level on-demand loading. With a complete plugin system that covers every life cycle from source code to build product, umi is able to support various functional extensions and business needs.
Let’s create our web app using Ant design React with dva and um.
1.
$ npm create umi2. Choose app
3. Select no to use typescript
When to use Typescript? If you are working on a project which you are going to maintain for long-term, you should use TypeScript from day 1. You get features like type hinting, code completion, intel about apis and packages, etc. but there are cons like: issues with third party type library definitions, boilerplate, etc.
4. Select antd and dva
5. Success!
6. Install dependencies
$ npm install7. Start
$ npm start8. Congrats you got an app running
9. Check the configuration in .umirc.js, you should have antd turned on
10. We need to write an application displaying the list of to-do items. The first step is to create a route. Inside the project directory run:
$ npx umi g page todo11. Then open http://localhost:8001/todo in your browser and you should see the corresponding page.
12. Let's create a TodoList component that we can used to show a list of items TODO. We will use Antd Table component to show a table with todo items and a different column to mark items done using a PopConfirm dialog, another antd component.
dva manages the domain model with model, with reducers for synchronous state updates, effects for async logic, and subscriptions for data source subscribe.
13. Let's create a model src/models/todo.js by typing,
In this model:
- namespace represents the key on global state
- state is the initial value, here it is an empty array
- reducers is equivalent to a reducer in redux, accepting an action, and update state simultaneously, here we are removing the todo item when done.
In umi, the model files under src/models will be automatically injected, you don't need to inject manually.
14. So far, we have completed a separate model and component. How do we connect them together? dva provides a connect method. If you are familiar with redux, this connect is from react-redux. We basically use the Todolist component with a Table above inside our page todo.js and connect it with the todos model we created.
Edit src/pages/todo.js and replace it with the following
15. For now we will add some dummy data to make the app run and show some content for the Todolist table of todo items. Edit src/app.js:
16. Run the app!
Next we will learn how to connect your web app to an external datasource on AWS, where we’ll store the todo items in dynamoDB and access it using AppSync GraphQL APIs.