帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:ARB  transit  Transitions  Transition  Action  actions  act  BASE  
Router transitions based on arbitrary actions

  • 源代码名称:redux-history-transitions
  • 源代码网址:http://www.github.com/johanneslumpe/redux-history-transitions
  • redux-history-transitions源代码文档
  • redux-history-transitions源代码下载
  • Git URL:
    git://www.github.com/johanneslumpe/redux-history-transitions.git
  • Git Clone代码到本地:
    git clone http://www.github.com/johanneslumpe/redux-history-transitions
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/johanneslumpe/redux-history-transitions
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • redux-history-transitions

    注意:这个库以前被称为,但是由于版本 0.4.0,对React路由器的硬依赖已经被删除了。 你可以将这个库与任何使用 history 库的路由系统一起使用。

    基于任意动作的history 转换。

    存储增强器允许你在操作的旁边定位转换,并在操作被调度后自动执行。

    为什么?

    典型情况是,当用户登录到另一个页面时,你希望将它的重定向到另一个页面。 有多种方法可以做到这一点。 例如可以监听存储并基于某种 loginSuccessful 标志执行转换。 但是这种标志实际上并不属于你的状态,因为它只用作内部标志,所以你知道什么时候应该转换。

    其他方法是使用像RX这样的东西,监听不同的状态,这样当你的状态改变时,你可以将用户转移到页面上,从而使你的用户可以。

    虽然这些方法都有效,但是它们很难将转换连接到特定的操作。 你的转变也分散在你的代码中。 redux-history-transitions 允许你在操作中直接嵌入转换,并在执行操作后执行它们。

    安装

    
    npm install --save redux-history-transitions
    
    
    
    

    用法

    创建一个类似这样的增强存储:

    import { createStore, compose } from'redux';importhandleTransitionsfrom'redux-history-transitions';// you have to create your history instance here and pass it to the store enhancer// Note: in order to use `search`, you have to enhance your history using the `useQueries`// enhancer!constenhancer=handleTransitions(history)conststore=createStore(reducer, initialState, enhancer);// Note: passing enhancer as the last argument to createStore requires redux@>=3.1.0

    现在可以按以下形式调度操作,并为你自动执行所需的过渡:

    // we expect `LOGGED_IN` to have been imported here from your action constantsexportdefault {
     login() {
     return {
     type:LOGGED_IN,
     payload: {
     userId:123 },
     meta: {
     transition: (prevState, nextState, action) => ({
     pathname:`/logged-in/${action.payload.userId}`,
     search:'?a=query',
     state: {
     some:'state',
     },
     }),
     },
     };
     },
    }

    现在,每次调度 login 操作时,都会自动发生到 /logged-in/SOMEUSERID的转换。 当然 searchstate 是可选的。 他们只是为了展示一个完整的例子。

    传递一个过渡对象

    尽管上面的工作可能会很快,但是如果你总是必须手动检查操作是否成功完成。 为了删除这个样板,你可以使用 beginsuccessfailure 键组合的对象作为 meta.transition 值。 中间件将自动检查某个操作,并根据 action.erroraction.meta.done 确定要调用哪个处理程序。 使用 errordone的方法是基于 ( 流量标准操作) 规范的losely。 每个处理程序都是可选的,仅在可用时才调用。 下面是一个仅在异步操作成功时转换的示例:

    exportdefault {
     login() {
     return {
     type:REGISTER_USER,
     payload: {
     username:'testuser' },
     meta: {
     done:true,
     transition: {
     success: (prevState, nextState, action) => ({
     pathname:`/user/${action.payload.userId}`,
     }),
     },
     },
     };
     },
    }

    延迟过渡

    有时你可能希望在延迟之后执行转换。 为了这样做,你可以从转换处理程序返回一个承诺。 上面相同的规则适用。 如果你的状态发生了延迟,你仍然可以用 undefined 解决你的承诺,以防止任何转换。 ( 例如如果用户已经手动更改了页面)。

    以下是使用蓝鸟 promise库的示例:

    exportdefault {
     login() {
     return {
     type:LOGGED_IN,
     payload: {
     userId:123 },
     meta: {
     transition: (prevState, nextState, action) => (
     Promise.delay(3000).then(() => {
     pathname:`/logged-in/${action.payload.userId}`,
     search:'?a=query',
     state: {
     some:'state',
     },
     }),
     ),
     },
     };
     },
    }

    示例

    有关工作示例,请查看 example 目录 !

    运行示例应用程序

    
    git clone https://github.com/johanneslumpe/redux-history-transitions.git
    
    
    cd redux-history-transitions
    
    
    npm install
    
    
    
    cd example
    
    
    npm install
    
    
    npm start
    
    
    open http://localhost:3000
    
    
    
    

    常见问题解答

    为什么这是一个存储增强器而不是中间件?

    因为转换处理程序应该接收到状态之后,操作已经被调度。 我不想用 _.defer 之类的东西。

    我可以执行 replace 转换而不是 push

    是,只需将 replace: true 添加到由你的动作函数 meta.transition 返回的对象。



    文章标签:BASE  act  Action  Transition  transit  历史  actions  Transitions  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语