Redux Thunk 用户登录示例

本文将介绍如何使用 Redux Thunk 中间件实现用户登录的功能。Redux Thunk 是一个用于处理异步操作的 Redux 中间件，可让我们在 Redux 中灵活地处理异步操作。

工具和依赖

在开始实现之前，我们需要准备以下工具和依赖：

• Redux
• Redux Thunk
• Axios

实现步骤

1. 安装依赖

我们需要通过 NPM 或 Yarn 安装 Redux、Redux Thunk 和 Axios：

npm install redux redux-thunk axios
# 或
yarn add redux redux-thunk axios

2. 创建 Redux Store

我们先创建一个 Redux Store，并将 Redux Thunk 中间件应用于 Store 中。

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

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

export default store;

3. 创建用户登录的 Action Creators

我们需要创建两个 Action Creators，一个用于表示请求开始，另一个用于表示请求成功。

export const userLoginRequest = () => {
  return {
    type: 'USER_LOGIN_REQUEST',
  };
};

export const userLoginSuccess = (data) => {
  return {
    type: 'USER_LOGIN_SUCCESS',
    payload: data,
  };
};

userLoginRequest 表示用户登录请求开始，为了让 UI 显示正在请求的状态。

userLoginSuccess 表示用户登录请求成功，将服务器返回的数据作为 payload 返回。

4. 创建用户登录的 Thunk

Thunk 是一个函数，接收 dispatch 和 getState 两个参数，可以用来处理异步操作。

我们需要创建一个用户登录的 Thunk，向服务器发送登录请求。

import axios from 'axios';
import { userLoginRequest, userLoginSuccess } from './actions';

export const userLogin = (username, password) => {
  return (dispatch) => {
    dispatch(userLoginRequest());

    return axios
      .post('https://example.com/api/login', { username, password })
      .then((response) => {
        dispatch(userLoginSuccess(response.data));
      });
  };
};

这里我们使用 Axios 发送 POST 请求并等待服务器返回数据。请求发送前，我们先调用 userLoginRequest Action Creator，向 Store 发送请求开始的 action。

请求成功后，我们调用 userLoginSuccess Action Creator，向 Store 发送请求成功的 action，并将服务器返回的数据作为 payload 一并发送。

5. 在 Components 中使用

我们在组件中使用 Redux Store 中的数据和 actions，完成用户登录功能。

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { userLogin } from './thunks';

const LoginPage = () => {
  const dispatch = useDispatch();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch(userLogin(username, password));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">登录</button>
    </form>
  );
};

export default LoginPage;

我们使用 useDispatch hook 将 dispatch 简单地注入进 Component 中，然后调用 Thunk 函数完成用户登录。

总结

本文介绍了如何使用 Redux Thunk 中间件处理异步操作，并给出了一个用户登录的示例。

通过使用 Redux Thunk，我们可以方便地将异步操作和 Redux 的 action 执行和结果转发封装在一起，简化了代码逻辑的编写，也让我们更方便地处理一些异步请求的情况，提高了开发效率。