redux-thunk 中 Action Creator 的使用技巧及最佳实践-JavaScript中文网-JavaScript教程资源分享门户

前言

随着前端应用程序的复杂度不断增加，我们需要更加高级的状态管理工具来帮助我们更好地组织应用程序的数据。Redux 是一个非常流行的状态管理工具，它允许我们建立可预测的、易于维护的代码状态。

在 Redux 体系结构中，Action 是用户操作或者其他事件的触发器。.action 是一个抽象的对象，其中包含一个 type 属性和其他可选的数据负载。Action Creator 是一个函数，创建一个 action，通常返回一个 action 对象。通常情况下，为了创建异步操作，我们需要使用 redux-thunk 中的 Action Creator。

在本文中，我们将学习使用 Action Creator 的最佳实践以及如何使用它们来管理应用程序的状态更加容易。

Redux-Thunk

如果你不熟悉 Redux-Thunk，可以通过下面这个示例来了解一下。

// javascriptcn.com 代码示例
// 异步函数action
export function getData() {
  return async (dispatch, getState) => {
    try {
      // dispatch 请求开始 action
      dispatch(getDataStart());
      // 发送请求获取数据
      const data = await fetchData();
      // dispatch 请求成功 action
      dispatch(getDataSuccess(data));
    } catch (error) {
      // dispatch 请求失败 action
      dispatch(getDataFailure(error));
    }
  }
}

上面这个 getData 函数是一个使用 Redux-Thunk 的异步 action 创建器。它返回一个函数，该函数接收 dispatch 和 getState 两个参数。此函数中发送异步请求获取数据，并分别分发成功、失败、开始请求的 actions。

Action Creator 最佳实践

在使用 Action Creator 时，请考虑以下最佳实践：

1. 将 Action Creator 与 Component 解耦

从设计来看，Action Creator 与 Component 应该尽可能地解耦合。因此，不应该在 Action Creator 中进行不必要的 Component 相关的逻辑。这样做将使您的代码易于测试，并使重用和组合成为可能。

2. 将具有相似目的和范围的行动字符串常量放在同一位置

如果有多个 Action Creator 都依赖于同一个字符串常量，请将此常量提取到单独的地方，而不是在每个 Action Creator 中使用 hard code。

例如：

export const FETCH_DATA_START = 'FETCH_DATA_START';
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

3. 根据需要对 Action Creator 进行抽象

Action Creator 的目的是创建具有类型和数据的 action，但随着应用程序的复杂性增加，您可能会发现自己编写许多重复的代码。在这种情况下，可以考虑使用高阶 Action Creator，并使创建 actions 的过程抽象出来。

例如：

// javascriptcn.com 代码示例
function createDataAction(type) {
  return (data) => ({
    type,
    payload: data,
  });
}

export const fetchDataStart = () => ({ type: FETCH_DATA_START });
export const fetchDataSuccess = createDataAction(FETCH_DATA_SUCCESS);
export const fetchDataFailure = createDataAction(FETCH_DATA_FAILURE);

这将使我们在新的 Action Creator 时使用 createDataAction 来创建需要带上数据的 action。

4. 处理异步操作

大多数应用程序需要在某种程度上处理异步操作，如使用 Redux-Thunk。为此，您应该使用异步 Action Creator，如上所述。

示例代码

让我们看一个更具体的示例，说明 Action Creator 的使用技巧及最佳实践。我们将从以下假设开始：应用程序需要从远程服务器获取数据，并将其存储在 Redux store 中。

首先，我们需要定义一个 Action Creator ，它会请求数据:

// javascriptcn.com 代码示例
export function fetchData() {
  return async (dispatch) => {
    try {
      // dispatch 请求开始 action
      dispatch(fetchDataStart());
      // 发送请求获取数据
      const data = await fetch('/api/data');
      // dispatch 请求成功 action
      dispatch(fetchDataSuccess(data));
    } catch (error) {
      // dispatch 请求失败 action
      dispatch(fetchDataFailure(error));
    }
  };
}

上面的 Action Creator 处理异步操作，使用了 Redux-Thunk。我们定义了以下 actions:

export const FETCH_DATA_START = 'FETCH_DATA_START';
export const fetchDataStart = () => ({ type: FETCH_DATA_START });

export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const fetchDataSuccess = (data) => ({ type: FETCH_DATA_SUCCESS, payload: data });

export const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';
export const fetchDataFailure = (error) => ({ type: FETCH_DATA_FAILURE, payload: error });

最后，我们需要将这些 Action Creator 与 Redux store 中的 reducer 绑定：

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

const rootReducer = combineReducers({
  data: dataReducer,
});

export default createStore(rootReducer, applyMiddleware(thunk));

最后，我们可以在 Component 中调用 fetchData Action Creator，并将数据存储在 Redux store 中。

// javascriptcn.com 代码示例
import React from 'react';
import { connect } from 'react-redux';
import { fetchData } from './actions';

class MyComponent extends React.Component {
  componentDidMount() {
    this.props.fetchData();
  }

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

    if (this.props.error) {
      return <div>Error: {this.props.error}</div>;
    }

    return (
      <ul>
        {this.props.data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

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

const mapDispatchToProps = {
  fetchData,
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

总结

在本文中，我们讨论了使用 Redux-Thunk 的 Action Creator 的最佳实践。我们强调了将 Action Creator 与 Component 解耦、抽象重复逻辑、在需要时处理异步操作等方面的重要性。我们还提供了一个示例代码，希望能够帮助您更好地理解和实践这些最佳实践。

参考文献

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6583887fd2f5e1655de68ab1