剖析 GitHub Star 数 15.1k 的开源项目 Redux Thunk

在繁忙的一周即将结束之际，是时候进行每周的总结和反思了。今天，我将深入探讨 GitHub 上拥有 15.1k Star 的开源项目——Redux Thunk。作为一名专注于 React 的前端工程师，我在面试中经常遇到有关 Redux Thunk 实现原理的问题，因为它是一个经典且实用的技术。

Redux Thunk 简介

Redux Thunk 是一款 Redux 中间件，它允许我们执行异步操作，例如向 API 发出请求或调用外部函数。它的关键优势之一是，它不会干扰 Redux 的原始数据流，同时仍允许我们执行异步操作。

实施原理

Redux Thunk 的实现原理相对简单。它基本上是一个函数，接受 Redux store 的 dispatch 方法作为参数。这个函数返回另一个函数，该函数可以接受一个 action 作为参数。在该函数中，我们可以执行异步操作，然后调度一个带有结果的新 action。

使用 Redux Thunk

使用 Redux Thunk 非常简单。首先，在 Redux store 中安装中间件：

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

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

然后，我们可以创建一个异步 action creator，就像这样：

const fetchUser = () => {
  return async (dispatch) => {
    const response = await fetch('https://api.example.com/users');
    const data = await response.json();
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
  };
};

在组件中，我们可以使用 useDispatch hook 来调度异步操作：

import { useDispatch } from 'react-redux';

const Component = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchUser());
  }, []);

  return <div>...</div>;
};

好处

使用 Redux Thunk 有几个好处：

• 异步操作： 它允许我们执行异步操作，例如向 API 发出请求或调用外部函数。
• 与 Redux 集成： 它与 Redux 无缝集成，不会干扰其原始数据流。
• 易于使用： 它易于使用，只需要安装中间件并创建异步 action creator。

示例

下面是一个示例，展示了如何使用 Redux Thunk 从 API 中获取用户列表：

action.js

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
  const response = await fetch('https://api.example.com/users');
  return await response.json();
});

component.js

import { useDispatch, useSelector } from 'react-redux';
import { fetchUsers } from './actions';

const Component = () => {
  const dispatch = useDispatch();
  const users = useSelector(state => state.users);

  useEffect(() => {
    dispatch(fetchUsers());
  }, []);

  return <div>{users.map(user => <li key={user.id}>{user.name}</li>)}</div>;
};

在本文中，我们探讨了 Redux Thunk 的实现原理、好处以及如何使用它来执行异步操作。Redux Thunk 是一个非常有用的库，对于希望执行异步操作的 React 开发人员来说至关重要。我希望本文能帮助您更好地理解和使用 Redux Thunk。