为什么 Redux 要写异步 action？

在前端开发中，Redux 是一个非常流行的状态管理库。它通过一个单一的 store 来管理整个应用的状态，并且通过 action 和 reducer 来修改状态。但是在实际开发中，我们经常需要处理异步操作，比如从服务器获取数据，这时候就需要使用异步 action。

异步操作的问题

在 Redux 中，action 是一个纯对象，它描述了一个状态的变化，而 reducer 则根据这个 action 来更新状态。但是在实际开发中，我们经常需要进行异步操作，比如从服务器获取数据，这时候就需要写异步 action。

异步 action 的问题在于，我们无法直接返回一个 action 对象，因为异步操作需要一些时间来完成。如果我们直接返回一个 action 对象，那么 reducer 将会在异步操作还没有完成时就开始更新状态，这显然是错误的。

解决方案

Redux 提供了一个解决方案来处理异步操作，即使用中间件。中间件是一个函数，它可以拦截 action，对其进行处理，然后再将它传递给 reducer。这样我们就可以在中间件中处理异步操作，而不需要直接返回一个 action 对象。

Redux 中最常用的中间件是 redux-thunk。它允许我们在 action 中返回一个函数，而不是一个对象。这个函数可以进行异步操作，并且在操作完成后再返回一个 action 对象，用来更新状态。

下面是一个使用 redux-thunk 处理异步操作的示例：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const initialState = {
  loading: false,
  data: null,
  error: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => {
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      })
      .catch((error) => {
        dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
      });
  };
};

const store = createStore(reducer, applyMiddleware(thunk));

store.dispatch(fetchData());

在这个示例中，我们定义了一个 fetchData 的异步 action。它返回一个函数，这个函数会进行异步操作，然后根据操作结果返回一个 action 对象。

我们还需要使用 applyMiddleware 函数将 redux-thunk 中间件添加到 store 中。然后我们就可以使用 store.dispatch 函数来触发异步操作了。

总结

在实际开发中，我们经常需要处理异步操作，比如从服务器获取数据。Redux 提供了一个解决方案来处理异步操作，即使用中间件。最常用的中间件是 redux-thunk，它允许我们在 action 中返回一个函数，来进行异步操作。使用异步 action 可以帮助我们更好地管理应用的状态，从而提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c372aaadd4f0e0ffdc3dc5