Evolution of State Management in React: From Props to Redux, Redux‑Saga, and DVA

The article outlines the evolution of state management within the React technology stack, starting with basic parent‑child communication via props , moving to lifting shared state to a common ancestor, and emphasizing the one‑way data flow principle that prevents child components from directly mutating parent state.

It then introduces Redux as a JavaScript state container independent of any UI library, describing how dispatch triggers reducers to produce new state. Example code shows a simple dispatch function and a reducer skeleton, followed by an implementation of applyMiddleware that composes middleware around the store’s dispatch method.

Next, the article covers redux‑saga , a middleware for handling side effects such as asynchronous data fetching. A code snippet demonstrates creating a saga middleware, applying it to the store, and running a root saga, illustrating how generators are used to manage complex async flows.

Building on Redux and redux‑saga, the DVA framework is presented as a higher‑level solution that eliminates the need to manually configure middleware, create the store, or bind the Provider . DVA consolidates reducers, state, and actions into a single model file, improving developer experience.

Practical project structures are shown, including a typical DVA directory layout and a concrete detail.js model that defines namespace, initial state, effects (using yield call and yield put ), and reducers. Additional examples illustrate how DVA is applied in commercial real‑estate projects using the Umi+DVA stack, with clear folder organization for pages, models, and services.

The article concludes that while teams may choose alternative libraries like MobX, the primary goals of any state‑management solution are to enable global communication, manage side effects, and improve coding ergonomics, and DVA offers a concise way to achieve these objectives in large‑scale React applications.