Redux 学习笔记：使用 Redux Thunk Middleware 实现异步 Action

前言

在前端开发中，我们常常需要处理异步操作，例如请求后端 API，这时候 Redux 中的 action 就显得十分重要。然而，Redux 最初的设计并不支持异步操作，这就需要使用 Redux Thunk Middleware 来实现异步 action。

本篇文章将介绍 Redux Thunk Middleware 的基本概念、使用方法和示例代码，并给出实际开发中的应用场景和注意点，希望能够帮助读者更好地理解和应用 Redux。

Redux Thunk Middleware 简介

Redux Thunk Middleware 是 Redux 官方提供的一个中间件，它允许我们在 action 中使用异步操作，例如发起 AJAX 请求、读取本地存储等等。Thunk 即“thunk 函数”，是一种 JavaScript 编程技巧，用于实现惰性求值和延迟执行。

Redux Thunk Middleware 的主要作用是将 action 创建函数变为返回一个函数，而不是一个对象。这个返回的函数可以接受 dispatch 和 getState 两个参数，用于实现异步操作。当 action 返回的是一个函数时，Redux Thunk Middleware 会自动调用这个函数，并将 dispatch 和 getState 作为参数传入。

Redux Thunk Middleware 使用方法

使用 Redux Thunk Middleware 非常简单，只需要在创建 store 的时候将其作为 applyMiddleware 的参数传入即可。示例如下：

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

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

在使用 Redux Thunk Middleware 时，我们需要将 action 创建函数变为返回一个函数的形式，这个返回的函数可以接受 dispatch 和 getState 两个参数，并在异步操作完成后调用 dispatch 函数来触发 action。示例如下：

export const fetchPosts = () => {
  return (dispatch, getState) => {
    dispatch(requestPosts());
    return fetch('/api/posts')
      .then(response => response.json())
      .then(json => dispatch(receivePosts(json)));
  };
};

在上面的示例中，fetchPosts 是一个异步 action 创建函数，它返回了一个函数，这个函数接受 dispatch 和 getState 两个参数，并在异步操作完成后调用 dispatch 函数来触发 action。在这个函数中，我们首先调用了 requestPosts action 来通知应用程序正在获取数据，然后发起了一个 AJAX 请求，并在请求成功后调用了 receivePosts action 来将获取到的数据存储到 store 中。

Redux Thunk Middleware 示例代码

下面是一个完整的 Redux Thunk Middleware 示例代码，它演示了如何使用 Redux Thunk Middleware 实现异步操作：

// www.javascriptcn.com code example
// actions.js
export const requestPosts = () => ({
  type: 'REQUEST_POSTS'
});

export const receivePosts = (json) => ({
  type: 'RECEIVE_POSTS',
  posts: json.data.children.map(child => child.data),
  receivedAt: Date.now()
});

export const fetchPosts = () => {
  return (dispatch, getState) => {
    dispatch(requestPosts());
    return fetch('https://www.reddit.com/r/reactjs.json')
      .then(response => response.json())
      .then(json => dispatch(receivePosts(json)));
  };
};

// reducers.js
const initialState = {
  isFetching: false,
  items: []
};

const postsReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'REQUEST_POSTS':
      return {
        ...state,
        isFetching: true
      };
    case 'RECEIVE_POSTS':
      return {
        ...state,
        isFetching: false,
        items: action.posts,
        lastUpdated: action.receivedAt
      };
    default:
      return state;
  }
};

export default postsReducer;

// App.js
import React from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from './actions';

class App extends React.Component {
  componentDidMount() {
    this.props.dispatch(fetchPosts());
  }

  render() {
    const { isFetching, items } = this.props;

    if (isFetching) {
      return <div>Loading...</div>;
    }

    return (
      <ul>
        {items.map(post => (
          <li key={post.id}>
            <a href={post.url}>{post.title}</a>
          </li>
        ))}
      </ul>
    );
  }
}

const mapStateToProps = state => ({
  isFetching: state.isFetching,
  items: state.items
});

export default connect(mapStateToProps)(App);

在上面的示例中，我们首先定义了三个 action 创建函数：requestPosts、receivePosts 和 fetchPosts。其中，requestPosts 和 receivePosts 分别用于在异步操作开始和结束时更新 store 中的状态，fetchPosts 则是一个异步 action 创建函数，它返回了一个函数，这个函数接受 dispatch 和 getState 两个参数，并在异步操作完成后调用 dispatch 函数来触发 action。

我们还定义了一个 postsReducer，它根据 action 的类型更新 store 中的状态。最后，我们使用 connect 函数将 App 组件连接到 store 中，从而可以通过 props 获取 store 中的状态和 dispatch 函数，并在组件挂载时调用 fetchPosts action 来获取数据。

Redux Thunk Middleware 应用场景和注意点

在实际开发中，Redux Thunk Middleware 的应用场景非常广泛，例如发起 AJAX 请求、读取本地存储、处理多个异步操作等等。然而，在使用 Redux Thunk Middleware 时，我们需要注意以下几点：

1. 异步操作不应该直接修改 store 中的状态，而是应该通过触发 action 来更新状态。
2. 异步操作可能会产生副作用，例如多次触发同一个 action，这时候我们需要使用 debounce 或 throttle 等技术来限制触发频率。
3. 在异步操作完成后，我们需要考虑如何处理错误，例如显示错误提示、回滚操作等等。

总之，Redux Thunk Middleware 是 Redux 中非常重要的一个中间件，它使得我们可以更加方便地处理异步操作，同时也需要我们在实际开发中注意一些细节和问题。希望本篇文章能够帮助读者更好地理解和应用 Redux。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4947ba941bf71348a0130