使用 Redux-thunk 改善 React & Redux 的代码结构-JavaScript中文网-JavaScript教程资源分享门户

在 React 和 Redux 中，我们经常需要在组件中调用异步操作（如 AJAX 请求），并更新 Redux 的 state。这种情况下，我们通常会使用 Redux-thunk 来管理异步操作和 Redux 的 action。

本文将介绍 Redux-thunk 的基本用法、真实场景下的应用以及如何使用 Redux-thunk 来优化 React & Redux 的代码结构。

Redux-thunk 基本用法

Redux-thunk 是一个中间件，它可以让 Redux 的 action 返回一个函数而不是一个对象。这个函数可以执行异步操作并 dispatch 一个或多个 action。

下面是一个简单的示例：

// www.javascriptcn.com code example
// 异步操作示例
function fetchData(url) {
  return dispatch => {
    dispatch({ type: 'FETCH_DATA_START' });

    axios.get(url)
      .then(response => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: response.data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_FAIL', payload: error }));
  };
}

// 使用异步操作
dispatch(fetchData('http://example.com/data'));

上面的代码中，fetchData 是一个 action creator，它返回一个函数，这个函数接收一个 dispatch 参数。在这个函数里面，我们可以执行异步操作，然后 dispatch 一个或多个 action。

真实场景下的应用

在真实的开发中，我们通常需要在组件中执行异步操作，并将数据存储在 Redux 的 state 中。下面是一个例子：

// www.javascriptcn.com code example
// 异步操作示例
function fetchUser(userId) {
  return dispatch => {
    dispatch({ type: 'FETCH_USER_START' });

    axios.get(`http://example.com/users/${userId}`)
      .then(response => dispatch({ type: 'FETCH_USER_SUCCESS', payload: response.data }))
      .catch(error => dispatch({ type: 'FETCH_USER_FAIL', payload: error }));
  };
}

// 用户信息组件
class User extends Component {
  componentDidMount() {
    this.props.fetchUser(this.props.userId);
  }

  render() {
    const { user, isLoading, error } = this.props;

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

    if (error) {
      return <div>{error.message}</div>;
    }

    return <div>{user.name}</div>;
  }
}

// 组件与 Redux 的连接
const mapStateToProps = (state, ownProps) => ({
  user: state.users[ownProps.userId],
  isLoading: state.isLoading,
  error: state.error,
});

const mapDispatchToProps = {
  fetchUser,
};

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

上面的代码中，我们定义了一个 action creator fetchUser，它接收一个 userId 参数，并返回一个函数。这个函数里面执行了一个异步操作，成功后 dispatch 了一个 FETCH_USER_SUCCESS action，失败后 dispatch 了一个 FETCH_USER_FAIL action。

在 User 组件中，我们使用了 componentDidMount 方法来在组件加载后执行异步操作，这个操作会根据 state 中的 isLoading 和 error 显示不同的内容。同时，我们使用了 connect 方法来连接组件和 Redux，其中 mapStateToProps 函数用于将 state 映射到组件的 props，mapDispatchToProps 函数用于将 action 映射到组件的 props。

使用 Redux-thunk 优化代码结构

由于 Redux-thunk 可以管理异步操作和 Redux 的 action，我们可以将异步操作的逻辑从组件中移到 action creator 中，这样可以使组件变得更简单，更专注于渲染 UI。下面是一个优化后的例子：

// www.javascriptcn.com code example
// 异步操作示例
function fetchUser(userId) {
  return dispatch => {
    dispatch({ type: 'FETCH_USER_START' });

    axios.get(`http://example.com/users/${userId}`)
      .then(response => dispatch({ type: 'FETCH_USER_SUCCESS', payload: response.data }))
      .catch(error => dispatch({ type: 'FETCH_USER_FAIL', payload: error }));
  };
}

// 用户信息组件
class User extends Component {
  componentDidMount() {
    this.props.fetchUser(this.props.userId);
  }

  render() {
    const { user, isLoading, error } = this.props;

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

    if (error) {
      return <div>{error.message}</div>;
    }

    return <div>{user.name}</div>;
  }
}

// 组件与 Redux 的连接
const mapStateToProps = (state, ownProps) => ({
  user: state.users[ownProps.userId],
  isLoading: state.isLoading,
  error: state.error,
});

const mapDispatchToProps = {
  fetchUser,
};

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

在上面的例子中，我们使用了 Redux-thunk 来处理异步操作。在组件中，我们只需要调用 fetchUser 方法，不需要关心任何的异步逻辑，这样大大简化了组件的代码，使其更专注于 UI 的渲染。

同时在 action creator 中，我们也可以根据需要组合多个异步操作，这样可以避免 callback hell，使代码变得更加清晰可读。

总之，使用 Redux-thunk 可以更好地管理异步操作和 Redux 的 action，使 React & Redux 的代码结构变得更加优雅和灵活。

结语

本文介绍了 Redux-thunk 的基本用法、真实场景下的应用以及如何使用 Redux-thunk 来优化 React & Redux 的代码结构。希望这篇文章对你有所帮助。

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

使用 Redux-thunk 改善 React & Redux 的代码结构

Redux-thunk 基本用法

真实场景下的应用

使用 Redux-thunk 优化代码结构

结语

接着读