dva

dva is a lightweight state management library inspired by Elm. It is designed to be easy to learn and use, especially for Redux users. Key features include:

• Minimal API Surface: It provides only 6 core APIs. When used with umi, the required API usage can be reduced to zero.
• Elm-inspired Architecture: It organizes the model using reducers, effects, and subscriptions, which simplifies the concepts typically introduced by Redux and Redux-Saga.
• Plugin Mechanism: Supports plugins like dva-loading to automate common tasks, such as handling loading states without manually calling showLoading and hideLoading everywhere.

dva provides several core features to streamline application development:

• Low API Surface: It features only 6 core APIs, making it very friendly for Redux users. When used with umi, the required API surface is reduced to zero.
• Elm-inspired Model Organization: Models are organized using reducers, effects, and subscriptions.
• Plugin Mechanism: Supports plugins like dva-loading to automatically handle loading states, removing the need to manually call showLoading and hideLoading.
• Hot Module Replacement (HMR): Supports HMR for components, routes, and models via babel-plugin-dva-hmr.

dva uses Elm-inspired concepts to organize application logic into models. Instead of separating Redux reducers, Sagas, and React Router logic into disparate files, you group them into a single model structure using three main pillars:

1. Reducers: Handle synchronous state updates.
2. Effects: Handle asynchronous side effects (powered by redux-saga).
3. Subscriptions: Listen to state changes or actions to trigger side effects.

This approach simplifies the mental model for managing complex application states.

dva encourages a specific component architecture:

• Route Components: Located in the /routes/ directory. These are container components that are connected to models and manage page-level logic.
• Presentational Components: Located in the /components/ directory. These are UI components that focus on how things look and are generally not connected to models directly.

Subscriptions allow you to listen to external data sources (like time, WebSockets, keyboard input, or route changes) and dispatch actions accordingly. The subscription format is ({ dispatch, history }) => unsubscribe.

Example: Triggering a fetch action when the user navigates to the /users path using the history object.

app.model({
  subscriptions: {
    setup({ dispatch, history }) {
      history.listen(({ pathname }) => {
        if (pathname === '/users') {
          dispatch({
            type: 'users/fetch',
          });
        }
      });
    },
  },
});

A Model is the core unit of data management in dva. It consists of:

• State: The data representing the model's current status. It should be treated as immutable data (always return a new object instead of mutating the existing one) to ensure independence, testability, and support for features like time travel.
• Action: A plain JavaScript object that describes a behavior. It must have a type property. Actions are the only way to trigger changes in the State.

While you can access the top-level state via the app._store property, it is generally not recommended for standard application logic.

const app = dva();
console.log(app._store); // Accessing top-level state