redux-transducers, Redux的传感器工具

分享于 

5分钟阅读

GitHub

  繁體 雙語
Use transducers to create Redux reducers.
  • 源代码名称:redux-transducers
  • 源代码网址:http://www.github.com/acdlite/redux-transducers
  • redux-transducers源代码文档
  • redux-transducers源代码下载
  • Git URL:
    git://www.github.com/acdlite/redux-transducers.git
    Git Clone代码到本地:
    git clone http://www.github.com/acdlite/redux-transducers
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/acdlite/redux-transducers
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    redux传感器

    build statusnpm version

    Redux的传感器工具。

    • transducerProtocol 让你使用传感器进行调度。
    • transduce() 让你从传感器创建减速器。

    符合传感器协议,由 transducers.js 和传感器js使用,并针对那些库进行测试。

    npm install --save redux-transducers

    使用传感器来调度动作

    transducerProtocol(createStore)

    这是一个高级存储,允许通过传感器调度Redux存储。 高订单存储目前没有文档的( 它来了。),但它们使用起来很简单:

    constnewCreateStore=transducerProtocol(createStore);conststore=newCreateStore(reducer, initialState);

    就是这样现在你可以使用传感器将动作分派到存储。

    如果你使用的是其他高价格的商店,如即将推出的applyMiddleware()transducerProtocol 必须先在链中加入。 这是因为,为了符合传感器协议和与流行的传感器库兼容,transducerProtocol() 返回的存储不是纯对象。 这不应该是个问题。 记住总是先把。

    // This won't workconstnewCreateStore=compose(applyMiddleware(m1, m2, m3), transducerProtocol, createStore);// Do this insteadconstnewCreateStore=compose(transducerProtocol, applyMiddleware(m1, m2, m3), createStore);

    工作原理

    解释这个问题最好的方法是向你展示一个例子:

    示例:将字符串映射到动作

    // Using the transducers.js libraryconstactions= [
     'Use Redux',
     'Weep with joy',
     'Mutate inside the reducer',
     null,
     'Learn about higher-order stores',
     { type:'REMOVE_TODO', payload:2 },
     'Learn about middleware'];into(store, compose(
     keep(),
     map(a=>typeof a ==='string'? { type:'ADD_TODO', payload: { text: a } }
     : a
     ),
     filter(a=>!(
     a.type==='ADD_TODO'&&/(M|m)utat(e|ion)/g.test(a.payload.text)
     ))
    ), actions);

    本示例使用 into(to, xform, from)函数,在这种情况下,通过执行调度,对集合中的每个操作应用转换- 在本例中为 array,但可以是数据结构-"水滴"。store.dispatch()的调用类似于对 array.push()的调用。

    利用传感器制作减速器的

    transduce(xform, reducer)

    transduce() 从传感器和基础减速器中创建减速器。 在将转换发送到基础减速器之前应用该转换。

    警告:警告:transduce() 不支持有状态

    传感器通常在集合上操作。 可以使用传感器来转换异步流,但它需要使用持续时间的局部状态。 我们不能这样做,因为,是一个纯函数,它必须为给定的状态和操作返回相同的结果。

    由于这个原因,transduce() 一次转换一个动作。 这意味着像 filter()map() 这样的传感器可以正常工作,但是 take()dedupe() 并没有。

    这个警告不适用于 transducerProtocol(),它与所有传感器一起工作,有状态或者有状态,因为它在到达减速器之前将它的转换成 。

    示例:过滤操作类型

    import { filter } from'transducers.js';importtransducefrom'redux-transducers';constaddTodoReducer=transduce(
     filter(action=>action.type==='ADD_TODO'),
     (state, action) => ({ ...state, todos: [...state.todos, action.payload })
    );constremoveTodoReducer=transduce(
     filter(action=>action.type==='REMOVE_TODO'),
     (state, action) => ({ ...state, todos:state.todos.filter(t=>t.id!==action.payload.id) })
    );// Combine into a single reducer with reduce-reducers// https://github.com/acdlite/reduce-reducersimportreduceReducersfrom'reduce-reducers';consttodoReducer=reduceReducers(addTodoReducer, removeTodoReducer);

    UTIL  RED  UTI  Utilities  transducer  
    相关文章