React手稿之 React-Saga

notebin 发布于2019-08-23 13:03 / 658人阅读

摘要：相当于一个放置在与中的垫片。之所以称之谓副作用呢，就是为了不让触发一个时，立即执行。也就是在与之间做一个事情，比如异步获取数据等。使用了中的功能，避免了像的回调地狱。把放入中最后再实现相就的即可在线示例推荐阅读手稿

Redux-Saga

redux-saga 是一个用于管理应用程序副作用（例如异步获取数据，访问浏览器缓存等）的javascript库，它的目标是让副作用管理更容易，执行更高效，测试更简单，处理故障更容易。

redux-saga相当于一个放置在action与reducer中的垫片。

之所以称之谓副作用呢，就是为了不让触发一个action时，立即执行reducer。也就是在action与reducer之间做一个事情，比如异步获取数据等。

redux-saga使用了ES6中的Generator功能，避免了像redux-thunk的回调地狱。

如何使用 安装

$ npm install --save redux-saga
//或者
$ yarn add redux-saga

示例

假设有一个UI界面，是根据用户ID显示用户详情的。那么我们需要通过接口从数据库根据userId来获取数据。

简单起见，我们在本地使用一个json文件来模拟数据库数据。

{
  "297ee83e-4d15-4eb7-8106-e1e5e212933c": {
    "username": "Saga"
  }
}

创建UI Component

import React from "react";
import { USER_FETCH_REQUESTED } from "../../../actions/User";

export default class extends React.Component {

  constructor(props) {
    super(props);
    this.state = { userId: "297ee83e-4d15-4eb7-8106-e1e5e212933c" }
  }

  render() {
    const { userInfo = {}, dispatch } = this.props;
    return (
      
          用户名： {userInfo.username}
      
    );
  }
}

创建saga，这里的saga就相当于action.

import { call, put, takeEvery } from "redux-saga/effects"
import { fetchUserApi } from "../api/user";
import { USER_FETCH_REQUESTED, USER_FETCH_SUCCEEDED, USER_FETCH_FAILED } from "../actions/User";

function* fetchUser({ payload }) {
  try {
    const user = yield call(fetchUserApi, payload.userId);
    yield put({ type: USER_FETCH_SUCCEEDED, user });
  } catch (e) {
    yield put({ type: USER_FETCH_FAILED, message: e.message });
  }
}

const userSaga = function* () {
  yield takeEvery(USER_FETCH_REQUESTED, fetchUser);
}

export default userSaga;

关于fetchUserApi,我们会在后面的章节中描述。这里仅获取了json文件中与userId相对应的数据。

把saga放入store中:

import createSagaMiddleware from "redux-saga";
import Sagas from "../sagas/index";

const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(Sagas)

最后再实现相就的reducer即可：

import { USER_FETCH_SUCCEEDED } from "../actions/User";

const initialState = { user: {} };

export default (state = initialState, action) => {
  switch (action.type) {
    case USER_FETCH_SUCCEEDED:
      return { ...state, user: action.user };
    default:
      return state;
  }
}

在线示例

推荐阅读React 手稿

私有云 idc机房托管手稿 react _React React 源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99187.html

React手稿之State Hooks of Hooks

摘要：官方也陈述，接下来的的工作会投入到中。从目前官方的文档可以看出，从以下四个方面来提高的编码。生命周期自定义方法的主要用途是替代之前版本的组件。说明到目前为止，在已发布的版本中有该功能，想体验该功能，必须安装。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念，目前还是Proposal阶段。官方也陈述，接下来的90%的工作会投入到React ...

DC_er 2019-08-23 13:53 评论0 收藏0
React手稿之 React-Redux

摘要：属性是必须的。需要一个与的一致。必须在的返回原。调试插件日志安装组件。然后加入到中即可例如扩展程序需要在应用市场安装然后在中使用增强功能将加入即可在线实例推荐阅读手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 属性是必须的。...

Freelander 2019-08-23 12:57 评论0 收藏0
React手稿之类型检查

摘要：类型检查是为了确保传入组件的参数正确性。通常在项目中可以使用或者来实现。示例以上内容在实现一个通用组件时非常有用。类型检查和参数默认值一起使用，保证组件的正常运行。 Typechecking With PropTypes 类型检查是为了确保传入组件的参数正确性。通常在项目中可以使用Flow或者TypeScript来实现。 React提供了PropTypes来检查类型。示例： imp...

tomorrowwu 2019-08-26 12:24 评论0 收藏0
React手稿之高阶组件

摘要：示例使用场景代码复用类似版本之前的。多个组件同用一段代码，或者同样的方法时，可以使用。示例在线示例抽象和更改可以通过包裹的组件公共抽象出来。可以通过包裹的组件传递修改添加等的示例渲然劫持条件渲然。示例反向继承返回的高阶组件类继承了。 Higher-Order Components HOC 不是React的标准API。 HOC 是一个函数。 HOC 返回一个Component。示例...

dkzwm 2019-08-26 12:22 评论0 收藏0
React手稿 - Context

摘要：提供了除之外的传参数的方式。是全局跨组件传递数据的。在线示例推荐阅读手稿 Context Context提供了除props之外的传参数的方式。 Context是全局跨组件传递数据的。 API React.createContext const {Provider, Consumer} = React.createContext(defaultValue); Provider ...

qingshanli1988 2019-08-26 13:23 评论0 收藏0