使用 redux-thunk 存储

在 Redux 应用中使用异步 action 是非常常见的情况。为了实现这一点，Redux 官方提供了一些方案，其中一个方案就是 redux-thunk 中间件。本文将介绍如何使用 redux-thunk 存储。

什么是 redux-thunk?

redux-thunk 是 Redux 的中间件。它允许你 dispatch 异步的 action，以便你可以处理异步数据请求、网络请求等任务。

如何安装 redux-thunk?

你可以使用 npm 安装：

npm install redux-thunk

当然，redux-thunk 也可以和 Redux 一样通过 CDN 来使用。

如何使用 redux-thunk?

使用 redux-thunk，你需要将 redux-thunk 中间件添加到 Redux store 中：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

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

此时，Redux store 就配置完成了。

接下来，你可以创建一个异步 action creator。一个典型的异步 action creator 由两个 action 构成：一个开始请求的 action 和一个结束请求的 action，以便在对应的 reducer 中更新状态。

import axios from 'axios';

export const fetchUsersRequest = () => {
  return {
    type: 'FETCH_USERS_REQUEST'
  };
};

export const fetchUsersSuccess = users => {
  return {
    type: 'FETCH_USERS_SUCCESS',
    payload: users
  };
};

export const fetchUsersError = error => {
  return {
    type: 'FETCH_USERS_ERROR',
    payload: error
  };
};

export const fetchUsers = () => {
  return async dispatch => {
    dispatch(fetchUsersRequest());
    try {
      const response = await axios.get('https://jsonplaceholder.typicode.com/users');
      const users = response.data;
      dispatch(fetchUsersSuccess(users));
    } catch (error) {
      const errorMessage = error.message;
      dispatch(fetchUsersError(errorMessage));
    }
  };
};

在上面的代码中，我们首先创建了三个 action creator：fetchUsersRequest、fetchUsersSuccess 和 fetchUsersError。然后，我们创建了 fetchUsers 异步 action creator。在 fetchUsers 函数中，我们首先 dispatch 了一个 fetchUsersRequest 的 action。然后，我们通过 axios.get 发送了一个请求来获取用户列表，并且 dispatch 了一个 fetchUsersSuccess 的 action，将获取到的用户列表作为 payload 发送到 reducer。如果请求遇到错误，我们会 dispatch 一个 fetchUsersError 的 action，并且将错误信息作为 payload 发送到 reducer。

这就是使用 redux-thunk 发起异步请求的方法。

总结

本文介绍了如何使用 redux-thunk 中间件来处理 Redux 应用中的异步数据请求。首先，我们需要安装和配置 redux-thunk。然后，我们通过创建异步 action creator 的方式来处理异步请求。希望本文对你有所帮助。