Redux 的异步等待和处理方法-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个流行的 JavaScript 应用程序状态管理库，它被广泛应用于前端领域。它提供通用的状态容器，可以让我们轻松管理应用程序的状态。在实际开发中，异步操作是非常常见的，例如从服务器获取数据、异步调用 API 等。在 Redux 中如何处理异步操作？

Redux 中的异步处理

Redux的设计理念是所有的state变更皆由纯函数reducer处理，因此Redux并没有内置异步处理能力，它只能通过 middleware 来处理异步操作。Redux官方提供了一个官方中间件——redux-thunk，redux-saga等等，其中redux-thunk是其中最简单的一个，同时它也大多数情况下能够满足我们的需求。

Redux Thunk

Thunk有好几种定义，一种最流行、最约定俗成的是它是一个能够延迟计算的表达式。具体而言，它是一个函数，用来封装一个计算任务，可以在需要时再进行计算。Redux Thunk利用到了这个特性，它提供了一种让action创建器真正做点异步操作的方式——在action创建器中返回一个函数，而不是普通action对象。

安装

使用npm安装redux-thunk：

npm install --save redux-thunk

使用

在使用 createStore 创建 Redux Store 的时候，通过 applyMiddleware 把 redux-thunk 加入到 Middleware 中。

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

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

示例

假如我们要实现一个异步增加计数器的功能，我们需要做如下的步骤：

定义增加计数器的 action 类型和函数

// javascriptcn.com 代码示例
// 1. constants.js
export const ADD_COUNT = 'ADD_COUNT';

// 2. actions.js
import { ADD_COUNT } from './constants';

export const addCount = () => ({
  type: ADD_COUNT,
});

创建 action 创建函数

在 action 创建函数中进行异步操作，最终通过 dispatch 分发 action

// javascriptcn.com 代码示例
// 3. actionCreators.js
import { addCount } from './actions';

export const addCountAsync = () => {
  return dispatch => {
    setTimeout(() => {
      dispatch(addCount());
    }, 1000);
  };
};

整合 action

// javascriptcn.com 代码示例
// 4.reducer.js
import { ADD_COUNT } from '../constants';

const initialState = {
  count: 0,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_COUNT:
      return {
        count: state.count + 1,
      };
    default:
      return state;
  }
};

export default reducer;

在组件中调用 action 创建函数

在组件中，我们通过 React-redux 提供的 connect 函数连接 Redux Store，从而可以在 props 上获取到 dispatch。然后再通过 dispatch 触发 action。

// javascriptcn.com 代码示例
// 5. App.js
import React from 'react';
import { connect } from 'react-redux';
import { addCountAsync } from './redux/actionCreators';

const App = ({ count, addCountAsync }) => (
  <div>
    <h1>Count: {count}</h1>
    <button onClick={addCountAsync}>Increase</button>
  </div>
);

const mapStateToProps = state => ({
  count: state.count,
});

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

上面的代码中，当点击按钮时，我们调用 addCountAsync 方法，该方法返回了一个函数，这个函数最终需要通过 dispatch 触发 ADD_COUNT action。

最后，我们的 app 功能正常，当点击按钮一秒后，计数器会自动 +1。

总结

本文介绍了 Redux 中的异步等待和处理方法，重点介绍了 redux-thunk 中间件的原理和使用方法。Redux 中的异步操作需要用 middleware 来处理，在中间件内写异步操作，最终通过 actionCreator 返回普通对象 action 或者函数来实现异步操作。redux-thunk 让我们可以非常方便地实现异步操作，它灵活易用、应用场景广，对于大多数前端开发者而言，它是一个不错的选择。

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