Redux 异步 action 方案-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个流行的状态管理库，它很好地解决了应用程序状态管理的问题。但是，在 Redux 中处理异步操作可能并不那么简单。Redux 异步 action 方案为我们提供了一种清晰而简单的方法，可以方便地处理异步操作。

异步操作的问题

Redux 中的 action 是一个简单的 JavaScript 对象，它描述着应用程序状态的变化。当我们需要触发一个异步操作，例如在网络上获取数据或等待一个定时器回调时，就会遇到一个问题：我们无法直接使用这样的 action。因为这样的 action 只能描述简单的同步行为，它无法处理异步操作。

Redux 异步操作的解决方案

Redux 提供了一个中间件来处理异步操作，我们可以使用它来解决上述问题。这个中间件就是 redux-thunk。

安装 `redux-thunk`

npm install redux-thunk --save

在 Redux Store 中使用 `redux-thunk`

在创建 Redux Store 时，我们需要将 redux-thunk 中间件与 Store 进行绑定。

// www.javascriptcn.com code example
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

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

export default store;

创建异步 action

在 redux-thunk 之前，我们会在 action 中触发异步操作。

export const fetchData = () => {
  return {
    type: 'FETCH_DATA',
    payload: axios.get('/api/data')
  }
}

现在，使用 redux-thunk 我们可以返回一个函数，而不是一个对象。这个函数接受 dispatch 函数作为参数，我们可以在这个函数中触发异步操作，并传递 dispatch 函数。

// www.javascriptcn.com code example
export const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    axios.get('/api/data')
      .then((response) => {
        dispatch({
          type: 'FETCH_DATA_SUCCESS',
          payload: response.data
        });
      })
      .catch((error) => {
        dispatch({
          type: 'FETCH_DATA_FAILURE',
          payload: error.message
        });
      });
  }
}

在这种情况下，我们有三个不同的 action：FETCH_DATA_REQUEST、FETCH_DATA_SUCCESS 和 FETCH_DATA_FAILURE。FETCH_DATA_REQUEST 应该在请求数据之前被触发，FETCH_DATA_SUCCESS 和 FETCH_DATA_FAILURE 分别是在请求成功和失败时被触发。

这里的重点是我们可以在 action 中处理异步操作。我们使用 dispatch 函数处理 action 的不同状态，并将不同的 action 对象发送到 Store，以处理状态变化。

在 React 组件中使用异步操作

现在我们已经创建了异步 action，我们可以在 React 组件中使用它。

// www.javascriptcn.com code example
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchData } from './actions';

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

  render() {
    return (
      <div>
        ...
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    data: state.data
  };
};

export default connect(mapStateToProps, { fetchData })(App);

在这个例子中，我们使用了 connect 函数将 App 组件和 Redux Store 绑定，并将 fetchData action 添加到 props 中。当组件挂载时，我们调用了 fetchData action。

小结

在 Redux Store 中处理异步操作可能需要一些额外的步骤。通过使用 redux-thunk 中间件，我们可以返回一个函数，它接受 dispatch 函数作为参数，并可以触发异步操作。通过这种方法，我们可以处理异步操作，以便更好地管理 Redux 应用程序的状态。

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

Redux 异步 action 方案