Skip to content
Get packs

Guide · Open source

How to use dva: install, models and key concepts

Updated · written with AI from the project's own documentation and checked against our catalogue data

dva is an open-source, MIT-licensed front-end framework built on redux, redux-saga and react-router. It groups app logic into models that contain reducers, effects and subscriptions, which aims to make state handling in React apps simpler. This guide covers what you need before starting, how to install dva with npm, and the core ideas you'll use, so you can decide whether it fits your project.

dvadvajs/dva · ★ 16.1k · MIT

Quick start

  1. 1Check prerequisites. Confirm Node.js and npm or yarn are installed on your machine.
  2. 2Install dva. Run npm install dva inside your project folder.
  3. 3Read the Concepts guide. Open the docs directory in the dva repository and read the Concepts document for the core ideas.
  4. 4Define a model. Create a model that groups reducers, effects and subscriptions for one area of app state.
  5. 5Add hot reloading. Set up babel-plugin-dva-hmr so components, routes and models reload during development.
  6. 6Add a plugin if needed. Consider dva-loading to handle loading state automatically.

What you need before you install dva

dva is aimed at React developers who already know Redux. The README's install instructions assume you have Node.js and either npm or yarn available.

The concepts stack up quickly, so beginners new to both React and Redux will likely find dva hard to follow at first.

  • Node.js
  • npm or yarn
  • Working knowledge of React and Redux

Install dva with npm

Install dva from npm with the command below. Run it inside your project folder.

npm install dva

Understand the core model: reducers, effects and subscriptions

dva organizes app logic into models. The project's README lists reducers, effects and subscriptions as the Elm-style concepts used to organize each model.

The README also points to a docs directory with guides and API references, plus a Concepts document describing the 8 concepts and how they connect. Read those before building a larger app.

  • reducers: handle state updates, as in Redux
  • effects: handle asynchronous work, built on redux-saga
  • subscriptions: listen to external events, such as keyboard input or browser events

Use built-in features: hot reloading and plugins

The README says dva supports hot module replacement for components, routes and models through babel-plugin-dva-hmr.

dva also has a plugin system. The README gives dva-loading as an example that handles loading state automatically.

Check compatibility and project fit

The README states that dva does not support IE8. It also notes that dva is used in production at Alibaba, according to its FAQ.

The README's Next section links to older blog posts for background. Check the docs directory and the issue tracker to confirm current activity before choosing dva for a new project.

What people use it for

  • Admin dashboards and user management screens, like the User Dashboard example in the README
  • Enterprise-style web apps built on Ant Design, such as the AntDesign Pro demo listed in the README
  • Small apps that need a simple data layer on top of Redux, such as the Count example

Frequently asked questions

Is dva free to use?

Yes. dva is licensed under the MIT License, as stated in the README's License section. You can read the full license text at the link the README provides.

How do I install dva?

Run npm install dva in your project. The README lists Node.js and npm or yarn as prerequisites.

Is dva production ready?

The README's FAQ says dva is used in more than 1000 projects at Alibaba. Check the repository's current issues and docs to judge recent activity for your own needs.

Does dva support IE8?

No. The README explicitly says dva does not support IE8.

What are good alternatives to dva?

Projects often compared with dva include Redux Toolkit, Zustand, MobX and Recoil. Choose based on how much structure you want and how familiar your team is with Redux.

Is dva good for beginners?

Not really. The README's own description suggests it suits developers already familiar with React and Redux, since its concepts stack up quickly for newcomers.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

dva suits React developers who already know Redux and want less boilerplate, especially for admin dashboards and enterprise-style apps. Beginners, or teams that need detailed current documentation, may be better served by Redux Toolkit, Zustand, MobX or Recoil.

Install options & downloads