欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-12 12:48:27
 redux-amrc 中文文档 这个插件将会帮你用更少的代码发起异步 action。通过这个插件你将: 不需要再手动编写异步 action 对象。 不需要再手动编写 reducer 来...

    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。