Redux-amrc中文文档安装及用法

 redux-amrc

中文文档

这个插件将会帮你用更少的代码发起异步 action。通过这个插件你将：

不需要再手动编写异步 action 对象。 不需要再手动编写 reducer 来处理异步 action 对象。 获取插件自动生成的 value、error、loaded、loading、loadingnumber 等多个异步状态。

安装

npm install redux-amrc --save

初级用法

该插件的初级用法只有三步：

第一步，将插件提供的asyncmiddleware连接到redux的中间件列表上。

store/configurestore.js

import { asyncmiddleware } from 'redux-amrc';
	
applymiddleware(thunk, asyncmiddleware)

第二步，将插件提供的reducercreator安装到 redux 的单一状态树的async节点上。

reducers/index.js

import { combinereducers } from 'redux';
import { reducercreator } from 'redux-amrc';

const rootreducer = combinereducers({
  async: reducercreator()
});

export default rootreducer;

第三步，使用插件提供的async来标记 action 创建函数（以被中间件识别），并将异步以 promise 的形式传递进这个 action 创建函数中。

actions/index.js

import { async } from 'redux-amrc';

/**
 * 这个action创建函数将会自动创建 load 和 load_success 这两个 action,
 * state.async.[key] 将会变为 'success'
 */
function success() {
  return {
    [async]: {
      key: 'key',
      promise: () => promise.resolve('success')
    }
  }
}

/**
 * 这个action创建函数将会自动创建 load 和 load_fail 这两个 action,
 * state.async.loadstate.[key].error 将会变为 'fail'
 */
function fail() {
  return {
    [async]: {
      key: 'key',
      promise: () => promise.reject('fail')
    }
  }
}

至此，异步的所有状态都将在你的掌控之中了，当异步 promise 被执行，该插件会自动帮你发起这些 action：

load: 特定数据开始加载 load_success: 数据加载成功 load_fail: 数据加载失败

你还可以从 redux 单一状态树上获取你想要的异步状态，这些状态都是该插件给你自动生成的：

state.async.[key]: promise 成功时返回的数据 state.async.loadstate.[key].loading: 特定 key 的数据是否正在加载 state.async.loadstate.[key].loaded: 特定 key 的数据是否加载完成 state.async.loadstate.[key].error: promise 出错时返回的错误信息 state.async.loadingnumber: 当前有多少异步正在加载

高级用法

如果 redux 单一状态树上某个节点的数据已经存在，你不想重复加载，你可以使用once选项，这会帮你减少异步请求，从而节约开销，提升性能。

function loaddata() {
  return {
    [async]: {
      key: 'data',
      promise: () => fetch('/api/data')
        .then(response => response.json()),
      once: true
    }
  };
}

如果你想使用自己编写的 reducer 更新该插件某个节点上的数据，比如state.async.[key]。那么你可以在插件的reducercreator方法上添加你的 reducers。其实reducercreator的用法和 redux 的combinereducers是一样的，都是接受多个 reducer 组成的对象。

// 你自己的 action 类型
const toggle = 'toggle';

// 你自己的 reducer
function keyreducer(state, action) {
  switch (action.type) {
    case toggle:
      return state === 'success'  'fail' : 'success';
    default:
      return state
  }

}

// 添加 reducers 到 reducercreator 上
const rootreducer = combinereducers({
  async: reducercreator({
    key: keyreducer
  })
});

// 发起这个 action 将会更新 `state.async.key` 上的数据
dispatch({ type: toggle }); 

api

asyncmiddleware: 一个 redux 中间件

[async] key: 一个字符串

promise(store): 一个返回promise的函数

store(可选参数): redux中的store对象 once: 布尔类型 reducercreator(reducers): 返回 reducer 的函数 reducers(可选参数): 多个reducer组成的对象

例子

基本例子：一个最小的 node 脚本，演示该插件的基本用法。npm start运行该程序后，观察命令行的输出，可以看到该插件帮你自动发起的 action 和相关的状态变化。

与react、fetch搭配使用：一个简单的用户界面，点击 load 按钮，该插件会帮你获取“网络请求是否正在加载”、“网络请求是否加载完成”、“网络请求得到的数据是什么”等多个异步状态。该例子的运行方法同样是npm start。