ES7 实战：解析 Dva 框架之 effects-JavaScript中文网-JavaScript教程资源分享门户

Dva 是一个基于 React 和 Redux 的前端框架，它为我们提供了一种可预测的数据流方式来管理应用状态。而 effects 是 Dva 中一项非常重要的功能，它可以让我们在异步请求、副作用处理等方面，轻松地解决许多问题。本文将介绍 Dva 中 effects 的使用，帮助大家更好地理解和使用 Dva。

effects 是什么？

effects 可以理解为 Redux 中的 middleware，它是一个处理副作用的函数。在 Redux 中，我们通常会使用 Redux-thunk 或 Redux-saga 来处理异步请求和处理副作用。而在 Dva 中，我们可以通过 effects 来实现类似的功能。通过 effects，我们可以在触发 action 时执行一些异步操作，例如获取后端 API 数据等。

在 Dva 中，effects 的执行会被 Redux-saga 所管理。每个 effect 是一个 Generator Function，可以通过 redux-saga/effects 中提供的 API 来处理异步操作。

如何使用 effects？

在 Dva 中，我们需要创建一个名为 effects 的属性来管理 effects 函数。例如：

// javascriptcn.com 代码示例
import { delay } from 'redux-saga'
import { put, takeEvery } from 'redux-saga/effects'

export default {
  namespace: 'example',
  state: {},
  reducers: {},
  effects: {
    *exampleEffect(action, { call, put }) {
      yield call(delay, 1000) // 模拟耗时操作
      yield put({ type: 'exampleAction' }) // dispatch action
    },
  },
  subscriptions: {},
}

这是一个最基本的 Example model，其中，exampleEffect 就是一个 effects 函数。

在 effects 函数中，我们可以使用 call 和 put 方法执行异步操作。call 方法用于执行一个异步函数并等待它返回结果，而 put 方法则用于通过 dispatch 方法发送一个 action 给 Redux store，触发对应的 reducer。

在上面的例子中，我们使用了 redux-saga 提供的 delay 方法来模拟耗时操作，然后使用 put 方法发送了一个 exampleAction 的 action。

需要注意的是，在 effects 函数中，我们不要直接去修改 state，因为这违背了 Redux 的设计初衷。如果需要改变 state，我们需要通过 dispatch action 触发 reducer 实现。

使用 effects 的注意事项

在使用 effects 时，我们需要注意以下几点：

处理异步操作时一定要使用 call 方法，这是 redux-saga 中区分同步和异步操作的重要手段。
effects 函数必须是 Generator Function，需要使用 * 符号进行声明。并且，在 effects 函数中必须使用 yield 关键字来执行异步操作，这样才能被 Redux-saga 所管理。
在 effects 函数中，不要直接修改 state，而是使用 put 方法触发 reducer 修改状态。
在 Dva 中，effects 函数会被放在套件的作用域下，也就是说，如果我们在不同的 model 中使用同样的 effects 函数，它们之间是互不影响的。

实际应用

现在我们来使用 effects 来实现一个简单的异步改变状态的操作。

先创建一个 Example 组件，用于触发异步操作：

// javascriptcn.com 代码示例
import React from 'react';
import { connect } from 'dva';

const Example = ({ dispatch }) => (
  <div>
    <button onClick={() => dispatch({ type: 'example/exampleEffect' })}>
      点击改变状态
    </button>
  </div>
);

export default connect()(Example);

然后，我们来创建一个 dva model，命名为 example，用于处理 Example 组件的状态改变：

// javascriptcn.com 代码示例
import { delay } from 'redux-saga'
import { put, takeEvery } from 'redux-saga/effects'

export default {
  namespace: 'example',
  state: {
    status: '未改变',
  },
  reducers: {
    setStatus(state, { payload }) {
      return { ...state, status: payload };
    },
  },
  effects: {
    * exampleEffect(_, { call, put }) {
      yield call(delay, 1000); // 模拟异步操作
      yield put({ type: 'setStatus', payload: '已改变' }); // 发送 action 修改 state
    },
  },
};

最后，我们将 Example 组件和 model 关联在一起：

import { create } from 'dva';
import Example from './Example';
import example from './example';

const app = create();
app.model(example);
app.router(() => <Example />);
app.start('#root');

现在，我们就可以在 Example 组件中点击按钮，触发 exampleEffect 函数，等待 1 秒后改变状态了。

总结

本文介绍了 Dva 中 effects 的使用和注意事项。通过这篇文章，相信大家对 effects 已经有了更深入的了解。实际上，在实际开发中，效果处理是非常常见的需求，因此了解 effects 的使用非常重要。希望本文可以对大家有所帮助。

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