使用 Redux-saga 管理副作用-JavaScript中文网-JavaScript教程资源分享门户

在 React 的开发过程中，不可避免地需要执行一些副作用（例如异步请求数据、访问本地存储等）。而这些副作用会使得代码变得难以维护和测试。Redux-saga 是一个基于 Redux 的中间件，它可以帮助我们管理这些副作用，使代码更加可靠和可测试。

什么是 Redux-saga

Redux-saga 提供了一种新的方式来处理副作用。传统的 Redux 流程是：组件 -> action -> reducer，其中 reducer 是纯函数，只能返回一个新的状态。而 Redux-saga 相当于在 reducer 前加入一个拦截器。如果 action 需要执行一个异步操作，我们可以在 saga 中处理。saga 首先捕获 action，然后执行异步操作，等待异步操作完成后再派发一个新的 action，这个新的 action 再传入 reducer 来更新状态。

举例来说，我们有一个需要异步加载数据的组件，它的实现可能如下所示：

// javascriptcn.com 代码示例
class MyComponent extends React.Component {
  componentDidMount() {
    fetch('/api/data').then(response => response.json())
      .then(data => {
        this.props.onDataLoaded(data)
      })
  }

  render() {
    return (
      <div>
        {this.props.data.map((item, index) => (
          <div key={index}>{item.text}</div>
        ))}
      </div>
    )
  }
}

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

const mapDispatchToProps = dispatch => ({
  onDataLoaded: data => dispatch({type: 'DATA_LOADED', payload: data})
});

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

在组件的 componentDidMount 方法中，我们使用 fetch 函数来异步获取数据，并在获取成功后派发一个 DATA_LOADED action，将数据传递给 reducer。但是这样有几个问题：

fetchData 信任了 Action 的名字和结构，将来不好维护
fetchData 代码中间的 promise 里看不出这个 promise 都干了哪些事情，以及它处理的是哪个动作里的异步数据

Redux-saga 的解决方案

使用 Redux-saga，我们可以将上面的代码改成如下形式：

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

function* fetchData(action) {
  try {
    const data = yield call(fetch, '/api/data')
    yield put({ type: 'DATA_LOADED', payload: data })
  } catch (e) {
    console.log(e)
  }
}

function* watchFetchData() {
  yield takeEvery('FETCH_DATA', fetchData)
}

export default function* rootSaga() {
  yield all([
    watchFetchData()
  ])
}

在上述代码中，我们定义了两个 saga，一个是 fetchData，它会利用 call 函数来异步获取数据，获取成功后再派发一个 DATA_LOADED action；另一个是 watchFetchData，它会监听 FETCH_DATA action，并在监听到 FETCH_DATA action 时调用 fetchData。

我们需要在应用的中心 store 中配置 rootSaga，并将它绑定到应用中心 store 上，这样 Redux-saga 才能正常工作。

// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

此时，我们在组件中只需要派发一个 FETCH_DATA action，就可以触发异步操作：

// javascriptcn.com 代码示例
class MyComponent extends React.Component {
  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    return (
      <div>
        {this.props.data.map((item, index) => (
          <div key={index}>{item.text}</div>
        ))}
      </div>
    )
  }
}

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

const mapDispatchToProps = dispatch => ({
  fetchData: () => dispatch({type: 'FETCH_DATA'})
});

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

Redux-saga 的特点

易于测试：saga 是一个普通的 JavaScript 对象，它只接收 pure action 并且只产生 pure action，这意味着我们可以轻松地测试 saga。
易于调试：saga 相对来说更容易调试，因为每个 saga 都像一个独立的线程，有自己的生命周期和状态。
与 Redux 打通：saga 是 Redux 的一个插件，它们能够很好地相互协作，使代码更加清晰和易于维护。
可以轻易地取消异步调用：通过使用 generator，我们可以轻松地取消一个异步调用，这在某些情况下非常有用。

总结

Redux-saga 提供了一种新的处理副作用的方式，可以使代码更加可靠和可测试。通过监听 action 并使用 generator 函数达到了异步调用的效果，不仅解决了之前纯函数无法执行副作用的问题，而且还兼顾了可测试性。同时 Redux-saga 还具备易于调试以及与 Redux 很好地打通的特点。希望本文的介绍能够帮助前端开发者更好地理解并应用 Redux-saga。

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