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。
上一篇: ps制作逼真的立体打印机效果图标
推荐阅读
-
Autodesk CFD 2019中文安装及激活破解图文教程(附下载)
-
Less 安装及基本用法
-
Artcam 2009中文版安装破解及汉化图文详细教程(附下载地址)
-
IMSPost v8.3 Suite破解版安装激活及中文设置图文详细教程(附下载)
-
Adobe Dimension CC 2018中文安装及破解详细教程(附破解补丁下载)
-
pytest中文文档--安装和入门
-
3D视频转换软件Xilisoft 3D Video Converter中文安装及激活教程(附补丁+软件下载)
-
pdf转换成txt转换器TriSun PDF to Text中文安装及激活教程(附注册码+软件下载)
-
GPU-Z简体中文绿色版下载地址及GPU-Z绿色版安装使用教程
-
Sibelius怎么激活?Sibelius2019中文安装及激活教程(附激活补丁下载)