{"id":10770,"library":"dva","title":"dva: Elm-style React/Redux Framework","description":"Dva is a lightweight, Elm-style front-end framework designed for building single-page applications by integrating React, Redux, React Router, and Redux Saga into a cohesive development experience. It simplifies state management and side effects through a declarative model system and streamlined data flow, aiming to reduce boilerplate typically associated with Redux setups. The package's last stable release, version 2.4.1, dates back to 2018, with subsequent beta versions for 2.6.0 released in late 2019. The project currently exhibits an abandoned release cadence, with no further stable releases or active development beyond 2019. Its key differentiators include an opinionated, \"batteries-included\" approach that pre-configures major React ecosystem libraries and its model-centric architecture for managing application state and logic.","status":"abandoned","version":"2.4.1","language":"javascript","source_language":"en","source_url":"https://github.com/dvajs/dva","tags":["javascript","dva","alibaba","react","react-native","redux","redux-saga","elm","framework"],"install":[{"cmd":"npm install dva","lang":"bash","label":"npm"},{"cmd":"yarn add dva","lang":"bash","label":"yarn"},{"cmd":"pnpm add dva","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for UI rendering. Requires React 15.x or 16.x.","package":"react","optional":false},{"reason":"Peer dependency for UI rendering. Requires ReactDOM 15.x or 16.x.","package":"react-dom","optional":false}],"imports":[{"note":"The primary export for creating a Dva application instance.","wrong":"const dva = require('dva'); // CommonJS is also correct for older projects or Node, but ESM is preferred in modern frontend.","symbol":"dva","correct":"import dva from 'dva';"},{"note":"Re-exported from 'react-redux' for connecting React components to the Redux store.","wrong":"import { connect } from 'react-redux'; // While re-exported, dva exports it directly for convenience.","symbol":"connect","correct":"import { connect } from 'dva';"},{"note":"Provides actions for declarative routing within Dva models (e.g., `put(routerRedux.push('/path'))`).","symbol":"routerRedux","correct":"import { routerRedux } from 'dva';"},{"note":"These are re-exports from `react-router-dom` (v4/v5 compatible) provided by Dva for routing setup.","symbol":"Route, Router, Switch","correct":"import { Router, Route, Switch } from 'dva/router';"}],"quickstart":{"code":"import dva, { connect } from 'dva';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Router, Route, Switch } from 'dva/router';\n\n// 1. Initialize\nconst app = dva();\n\n// 2. Model\napp.model({\n namespace: 'count',\n state: { current: 0 },\n reducers: {\n add(state) { return { current: state.current + 1 }; },\n minus(state) { return { current: state.current - 1 }; },\n },\n effects: {\n *addAsync(action, { call, put }) {\n yield call(() => new Promise(resolve => setTimeout(resolve, 1000)));\n yield put({ type: 'add' });\n },\n },\n subscriptions: {\n setup({ dispatch, history }) {\n history.listen(({ pathname }) => {\n if (pathname === '/count') {\n console.log('Entered count page');\n dispatch({ type: 'add' }); // Initial increment when entering\n }\n });\n },\n },\n});\n\n// 3. View\nfunction CountPage({ count, dispatch }) {\n return (\n
} />\n \n \n \n));\n\n// 5. Start\n// Ensure you have a div with id=\"root\" in your HTML\napp.start('#root');\n","lang":"typescript","description":"Demonstrates a basic Dva application setup with a model (state, reducers, effects, subscriptions) and routing using `dva/router`, showing how to connect a component to the Redux store."},"warnings":[{"fix":"For new projects, consider modern alternatives like UmiJS, Rematch, or Redux Toolkit. For existing projects, plan for migration to a maintained framework.","message":"The `dva` project is no longer actively maintained with stable releases since 2018. New features, bug fixes, or security patches are unlikely to be released. This impacts long-term viability and security.","severity":"breaking","affected_versions":">=2.4.1"},{"fix":"Ensure your project's `react` and `react-dom` versions are within the specified range (15.x or 16.x). If upgrading React is necessary, a migration away from Dva might be required.","message":"Dva has strict peer dependencies on `react@15.x || ^16.0.0-0` and `react-dom@15.x || ^16.0.0-0`. Using React 17 or 18 with Dva is not officially supported and can lead to unexpected runtime issues or compatibility problems due to changes in React's lifecycle and rendering mechanisms.","severity":"gotcha","affected_versions":">=2.4.1"},{"fix":"Stick to `react-router-dom` v5.x or earlier if using Dva's integrated router. If migrating to `react-router-dom` v6, you will likely need to rewrite Dva's router setup and potentially model subscriptions that rely on router events.","message":"Dva's internal router (exposed via `dva/router`) is based on `react-router-dom` v4.x or v5.x. It is not compatible with `react-router-dom` v6.x, which introduced significant API changes. Direct integration with `react-router-dom` v6 will break Dva's routing functionality.","severity":"gotcha","affected_versions":">=2.4.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install compatible versions of React and ReactDOM: `npm install react@^16.0.0 react-dom@^16.0.0` or `yarn add react@^16.0.0 react-dom@^16.0.0`.","cause":"`react` or `react-dom` are missing from your project's `package.json` dependencies, or their installed versions do not satisfy Dva's peer dependency range.","error":"Invariant Violation: Dva requires React and React-DOM to be installed as peer dependencies."},{"fix":"Add a unique `namespace` string property to your Dva model definition, e.g., `app.model({ namespace: 'myModel', ... });`.","cause":"A Dva model object was registered without a required `namespace` string property, which uniquely identifies the model in the Redux store.","error":"Error: Invariant failed: Models require a `namespace` property."},{"fix":"Ensure your component is wrapped with Dva's `connect` higher-order component, which injects `dispatch` as a prop: `export default connect((state) => ({ ...state }))(MyComponent);`.","cause":"You are attempting to call `dispatch` in a React component that has not been properly connected to the Dva/Redux store, or in a context where `dispatch` is not implicitly available.","error":"TypeError: Cannot read properties of undefined (reading 'dispatch') OR dispatch is not a function"}],"ecosystem":"npm"}