使用 Redux-effects 管理异步副作用

在前端开发中，异步操作是非常常见的，例如从后台获取数据、发送请求等等。而 Redux-effects 是一个库，它可以帮助我们更好地管理异步副作用。本文将介绍 Redux-effects 的使用方法，并通过示例代码来帮助读者更好地理解。

Redux-effects 简介

Redux-effects 是一个 Redux 中间件，它允许我们在 Redux 中处理异步副作用。它是一个基于函数式编程的库，可以帮助我们更好地管理异步操作，使得代码更加清晰易懂。

Redux-effects 提供了一系列的函数，例如 call、put、select 等等。这些函数可以帮助我们更好地管理异步操作。

Redux-effects 的使用方法

首先，我们需要安装 Redux-effects：

npm install redux-effects --save

然后，在 Redux 的 createStore 函数中使用 applyMiddleware 方法来使用 Redux-effects：

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

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

接着，我们可以在 Redux 的 action 中使用 Redux-effects 提供的函数来处理异步操作。例如，我们可以使用 call 函数来调用一个异步函数：

// www.javascriptcn.com code example
import { call } from 'redux-effects';

export const getData = () => ({
  type: 'GET_DATA',
  payload: call(fetchData)
});

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};

在上面的代码中，我们使用 call 函数来调用 fetchData 函数，fetchData 函数是一个异步函数，它会从指定的 URL 中获取数据。call 函数会返回一个 Promise 对象，这个 Promise 对象会在 fetchData 函数执行完毕后被 resolve。

我们还可以使用 put 函数来 dispatch 一个 action：

// www.javascriptcn.com code example
import { put } from 'redux-effects';

export const getDataSuccess = (data) => ({
  type: 'GET_DATA_SUCCESS',
  payload: data
});

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};

export const getData = () => async (dispatch) => {
  try {
    const data = await dispatch(call(fetchData));
    dispatch(put(getDataSuccess(data)));
  } catch (error) {
    console.error(error);
  }
};

在上面的代码中，我们使用 put 函数来 dispatch 一个 action，这个 action 的类型是 GET_DATA_SUCCESS，它的 payload 是从 fetchData 函数中返回的数据。我们在 getData 函数中使用了 async/await 语法，这样可以等待 call 函数返回的 Promise 对象 resolve 后再执行 dispatch(put(getDataSuccess(data)))。

Redux-effects 的指导意义

Redux-effects 可以帮助我们更好地管理异步副作用，使得代码更加清晰易懂。使用 Redux-effects 可以让我们避免使用回调函数、Promise 等等，这样可以让我们的代码更加简洁易懂。

使用 Redux-effects 也可以让我们更好地进行单元测试。由于 Redux-effects 的函数是纯函数，所以我们可以更好地进行单元测试，这样可以保证代码的质量。

示例代码

下面是一个完整的示例代码，它演示了如何使用 Redux-effects 来管理异步副作用：

// www.javascriptcn.com code example
import { createStore, applyMiddleware } from 'redux';
import effects, { call, put } from 'redux-effects';

const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'GET_DATA_SUCCESS':
      return { ...state, data: action.payload };
    default:
      return state;
  }
};

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};

export const getDataSuccess = (data) => ({
  type: 'GET_DATA_SUCCESS',
  payload: data
});

export const getData = () => async (dispatch) => {
  try {
    const data = await dispatch(call(fetchData));
    dispatch(put(getDataSuccess(data)));
  } catch (error) {
    console.error(error);
  }
};

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

store.dispatch(getData());

在上面的代码中，我们首先定义了一个 reducer 函数，它会根据不同的 action 类型来更新状态。然后，我们定义了一个 fetchData 函数，它会从指定的 URL 中获取数据。

接着，我们定义了一个 getDataSuccess 函数，它会返回一个 action，这个 action 的类型是 GET_DATA_SUCCESS，它的 payload 是从 fetchData 函数中返回的数据。

最后，我们定义了一个 getData 函数，它会使用 async/await 语法来等待 call 函数返回的 Promise 对象 resolve 后再执行 dispatch(put(getDataSuccess(data)))。我们在 createStore 函数中使用了 applyMiddleware 方法来使用 Redux-effects。

在最后一行代码中，我们调用了 store.dispatch(getData())，这样就会触发一个异步操作，从指定的 URL 中获取数据，并将数据保存到 Redux 的 store 中。

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