帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:Reduce  Action  RED  actions  Reducers  act  
An opinionated lib to create actions and reducers for Redux

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

    一个固执的库创建动作和减速器的传奇。 主要的目标是使用动作本身作为引用 inside 而不是字符串常量。

    安装

    # NPMnpm install redux-act --save# Yarnyarn add redux-act

    你也可以使用浏览器友好的编译文件或者从 NPM 中的缩小版本。

    浏览器支持: 这个库使用了 String.prototype.startsWith 不支持的。 确定要添加 polyfill,如果你正在定位这里浏览器。 了解更多信息。

    电子邮件内容

    用法

    即使有名为 createAction的函数,它也会根据Redux词汇表创建一个 action creator 。 对 NAME的函数 createActionCreator 有点过时了。 如果你不确定某事是动作还是动作创作者,只要记住动作是纯的对象。

    // Import functionsimport { createStore } from'redux';import { createAction, createReducer } from'redux-act';// Create an action creator (description is optional)constadd=createAction('add some stuff');constincrement=createAction('increment the state');constdecrement=createAction('decrement the state');// Create a reducer// (ES6 syntax, see Advanced usage below for an alternative for ES5)constcounterReducer=createReducer({
     [increment]: (state) => state +1,
     [decrement]: (state) => state -1,
     [add]: (state, payload) => state + payload,
    }, 0); // <-- This is the default state// Create the storeconstcounterStore=createStore(counterReducer);// Dispatch actionscounterStore.dispatch(increment()); // counterStore.getState() === 1counterStore.dispatch(increment()); // counterStore.getState() === 2counterStore.dispatch(decrement()); // counterStore.getState() === 1counterStore.dispatch(add(5)); // counterStore.getState() === 6

    常见问题解答

    • Redux devtools使用 ? 是

    • reducers 的工作? 当然,它们只是普通的减速器。 记住,根据 combineReducers 检查,在组合每个减速器时,需要提供默认状态。

    • 如何工作? 没有多少魔力。 生成的id在每个动作类型前被预先设置,并使用 inside reducer代替默认使用的字符串常量( 默认情况下是。

    • 你能展示出它是如何不同于传统的传奇传奇的? 当然,你可以检查提交来更新计数器示例todomvc示例。 你也可以同时运行两个示例 npm install && npm start inside 每个文件夹。

    • 2 创建减速器的原因? 只有一个地图 action => reduce function 这就是为什么另一个在这里,如果你需要一个小的状态 inside,Having 类似于参与者。 另外,其中一个语法是 ES6.

    • 减速器里面有 ,为什么(state, payload) => newState 而不是 (state, action) => newState 在 API below 上可以找到更多关于这个的信息,但是基本上,这是由由lib处理的元数据和你的有效负载组成的。 因为你只关心那部分,最好直接做。 当然,如果有必要,你可以回到完整的行动。

    • 你为什么这么做? 字符串常量是否足够好? 我们知道 Redux doc doc这种魔法并不真正好,节省几行代码是不值得隐藏这样的逻辑。 我可以以理解。并且不要错误,这个lib的主要目标不是减少样板( 即使我喜欢它),而是使用。 你永远不知道项目的新开发会做什么。 也许( s ) 不会意识到刚刚引入的一个新的常数( s ) 已经经存在,而且一切都被破坏了。 让我们来阻止 !

    高级用法

    import { createStore } from'redux';import { createAction, createReducer } from'redux-act';// You can create several action creators at once// (but that's probably not the best way to do it)const [increment, decrement] = ['inc', 'dec'].map(createAction);// When creating action creators, the description is optional// it will only be used for devtools and logging stuff.// It's better to put something but feel free to leave it empty if you want to.constreplace=createAction();// By default, the payload of the action is the first argument// when you call the action. If you need to support several arguments,// you can specify a function on how to merge all arguments into// an unique payload.let append =createAction('optional description', (...args) =>args.join(''));// There is another pattern to create reducers// and it works fine with ES5! (maybe even ES3 o/)conststringReducer=createReducer(function (on) {
     on(replace, (state, payload) => payload);
     on(append, (state, payload) => state += payload);
     // Warning! If you use the same action twice,// the second one will override the previous one.}, 'missing a lette'); // <-- Default state// Rather than binding the action creators each time you want to use them,// you can do it once and for all as soon as you have the targeted store// assignTo: mutates the action creator itself// bindTo: returns a new action creator assigned to the storeconststringStore=createStore(stringReducer);replace.assignTo(stringStore);
    append =append.bindTo(stringStore);// Now, when calling actions, they will be automatically dispatchedappend('r'); // stringStore.getState() === 'missing a letter'replace('a'); // stringStore.getState() === 'a'append('b', 'c', 'd'); // stringStore.getState() === 'abcd'// If you really need serializable actions, using string constant rather// than runtime generated id, just use a uppercase description (with eventually some underscores)// and it will be use as the id of the actionconstdoSomething=createAction('STRING_CONSTANT');doSomething(1); // { type: 'STRING_CONSTANT', payload: 1}// Little bonus, if you need to support metadata around your action,// like needed data but not really part of the payload, you add a second functionconstmetaAction=createAction('desc', arg=> arg, arg=> ({meta:'so meta!'}));// Metadata will be the third argument of the reduce functioncreateReducer({
     [metaAction]: (state, payload, meta) => payload
    });

    API

    ( [description],[payloadReducer],[metaReducer] )

    参数

    • 描述 ( 字符串,可选): 在显示操作时通过日志记录和devtools使用。 如果这里参数只是大写,有下划线和数字,它将用作没有任何生成的,的操作类型。 你可以使用这里特性来具有可以在客户端和服务器之间共享的可以序列化操作。
    • payloadReducer ( 函数,可选): 将多个参数转换为唯一有效负载。
    • metaReducer ( 函数,可选): 将多个参数转换为唯一的元数据对象。

    用法

    返回一个新的操作创建者。 如果你指定了描述,它将被devtools使用。 默认情况下,createAction 将返回一个函数,它的第一个参数将在调度操作时用作有效负载。 如果需要支持多个参数,则需要指定一个英镑有效负载减速器,以便将所有参数合并到一个惟一的。

    // Super simple actionconstsimpleAction=createAction();// Better to add a descriptionconstbetterAction=createAction('This is better!');// Support multiple arguments by merging themconstmultipleAction=createAction((text, checked) => ({text, checked}))// Again, better to add a descriptionconstbestAction=createAction('Best. Action. Ever.', (text, checked) => ({text, checked}))// Serializable action (the description will be used as the unique identifier)constserializableAction=createAction('SERIALIZABLE_ACTION_42');

    操作创建者

    动作创建者基本上是一个接受参数并返回具有以下格式的动作的函数:

    • type: 生成的id + 你的描述。
    • payload: 调用操作创建者时传递的数据。 将是函数的第一个参数,除非在创建操作时指定了有效负载减速器。
    • 如果你提供了英镑 metaReducer,它将用于创建分配给这个键的元数据对象。 否则就是 undefined
    • error: 指示操作是否根据 FSA的一个布尔值。
    constaddTodo=createAction('Add todo');addTodo('content');// return { type: '[1] Add todo', payload: 'content' }consteditTodo=createAction('Edit todo', (id, content) => ({id, content}));editTodo(42, 'the answer');// return { type: '[2] Edit todo', payload: {id: 42, content: 'the answer'} }constserializeTodo=createAction('SERIALIZE_TODO');serializeTodo(1);// return { type: 'SERIALIZE_TODO', payload: 1 }

    操作创建者具有以下方法:

    getType()

    返回所生成的类型,该类型将由这里操作创建者的所有操作使用。 用于兼容性的用途。

    assignTo ( 存储| 调度)

    请记住,你仍然需要分派这些操作。 如果已经有一个或者多个存储,则可以使用 assignTo 函数指定操作。 这将改变动作创造者本身。 你可以传递一个存储函数或者一个分派函数,也可以传递两个。

    let action =createAction();let action2 =createAction();constreducer=createReducer({
     [action]: (state) => state *2,
     [action2]: (state) => state /2,
    });conststore=createStore(reducer, 1);conststore2=createStore(reducer, -1);// Automatically dispatch the action to the store when calledaction.assignTo(store);action(); // store.getState() === 2action(); // store.getState() === 4action(); // store.getState() === 8// You can assign the action to several stores using an arrayaction.assignTo([store, store2]);action();// store.getState() === 16// store2.getState() === -2

    bindTo ( 存储| 调度)

    如果你需要不变性,你可以使用 bindTo,它将返回一个新的动作创建者,它将自动调度它的操作。

    // If you need more immutability, you can bind them, creating a new action creatorconstboundAction=action2.bindTo(store);action2(); // Not doing anything since not assigned nor bound// store.getState() === 16// store2.getState() === -2boundAction(); // store.getState() === 8

    assigned()/bound()/dispatched()

    测试操作创建者的当前状态。

    constaction=createAction();action.assigned(); // false, not assignedaction.bound(); // false, not boundaction.dispatched(); // false, test if either assigned or boundconstboundAction=action.bindTo(store);boundAction.assigned(); // falseboundAction.bound(); // trueboundAction.dispatched(); // trueaction.assignTo(store);action.assigned(); // trueaction.bound(); // falseaction.dispatched(); // true

    raw(...args)

    当操作创建者被分配或者绑定时,它不再只返回动作对象,而且也将它调度。 在某些情况下,你需要在不调度( 。例如批处理操作时)的情况下。 为了达到这个目的,你可以以使用 raw 方法来返回裸操作。 你可以以说,如果没有分配或者约束,那么它与操作创建者完全一样。

    constaction=createAction().bindTo(store);action(1); // store has been updatedaction.raw(1); // return the action, store hasn't been updated

    asError(...args) *

    如果有效负载是 error的实例,则该操作将被标记为错误。 但是,如果你需要使用其他类型的负载作为错误负载,你可以始终使用这里方法。 它将通过将 error 设置为 true 来应用相同的负载。

    constactionCreator=createAction(value=> {
     if (value >10) { returnnewError('Must be less than 10') }
     return { value: value }
    })constgoodAction=actionCreator(5)goodAction.error// falseconstbadAction=actionCreator(20)badAction.error// trueconstforcedBadAction=actionCreator.asError(1)forcedBadAction.error// true

    createReducer ( 处理器,[defaultState] )

    参数

    • 处理器 ( 对象或者函数): 如果是 object,则是reduce函数的动作图。 如果 function,则采用两个属性: register 操作的函数,另一个函数将它的注销。 请参见下面。
    • defaultState ( 任意,可选): 减速器的初始状态。 如果你计划使用这里减速机 inside,则不得为空。

    用法

    返回一个新的减速器。 它的语法与 Array.prototype.reduce 函数的语法相同。 你可以以指定如何以第第二个参数和默认状态作为第二个参数减少。 因为你可以在创建它时从存储区检索默认状态,但是如果你想将它作为一个默认状态,则应该考虑它,特别是如果你想将它与 combineReducers 一起使用,。

    有两种模式可以创建减速器。 一个是将对象作为 action creators 映射到 reduce functions 。 这些函数具有以下签名: (previousState, payload) => newState 另一个是使用一个功能工厂。 不要试图解释它,只读下面的例子。

    constincrement=createAction();constadd=createAction();// First patternconstreducerMap=createReducer({
     [increment]: (state) => state +1,
     [add]: (state, payload) => state + payload
    }, 0);// Second patternconstreducerFactory=createReducer(function (on, off) {
     on(increment, (state) => state +1);
     on(add, (state, payload) => state + payload);
     // 'off' remove support for a specific action// See 'Adding and removing actions' section}, 0);

    减速器

    像一切一样,减速器只是一个函数。 它接受当前状态和动作负载,并返回新状态。 它有以下方法。

    选项( {有效负载:布尔值,回退: [handler] })

    action动作是带有 typepayload ( 你的实际数据是) 和最后一些 metadata的对象,因此所有的reduce函数都将直接以负载作为 their,因为lib并不是所有的属性,而是由lib来处理,你不应该关心它们。 如果确实需要使用完整操作,则可以更改减速器的行为。 返回用于链接的减速器。

    constadd=createAction();constsub=createAction();constreducer=createReducer({
     [add]: (state, action) => state +action.payload,
     [sub]: (state, action) => state -action.payload}, 0);reducer.options({
     payload:false});

    你可以在此阅读更详细的解释。

    指定与减速器具有完全相同签名的fallback 处理程序,则在发送未由减速器处理的操作时,将调用该函数。

    constaction=createAction();constreducer=createReducer({}, 0);reducer.options({
     // action is not handled, so fallback will be calledfallback: (state, payload) => state + payload,
    });conststore=createStore(reducer);store.getState(); // 0store.dispatch(action(5));store.getState(); // 5store.dispatch(action(-10));store.getState(); // -5

    有( 操作创建者)

    测试减速器是否对特定操作创建者或者字符串类型具有reduce函数。

    constadd=createAction();constsub=createAction();constreducer=createReducer({
     [add]: (state, action) => state +action.payload}, 0);reducer.has(add); // truereducer.has(sub); // falsereducer.has(add.getType()); // true

    在( 动作创建者| 动作创建者 [],减少函数) 上花费英镑英镑

    你可以动态添加和删除操作。 请参阅添加和删除操作部分了解更多信息。 你可以使用 redux-act 操作创建者或者原始字符串类型。 还可以使用 array的,它将 on 或者 off 函数应用到所有元素。

    它们都返回减速器,所以你可以把它们。

    assignAll ( actionCreators,存储)

    参数

    • actionCreators ( 对象或者 array ): 要指定哪些操作创建者。 如果是对象,它是 NAME -> 操作创建者的映射,在一次导入多个动作时很有用。
    • 存储 ( 对象或者 array ): 调度操作时的目标存储。 只能是一个或者多个 inside 一个 array 。

    用法

    通用的Pattern 是将一组动作创建者导出为对象。 如果你想把它们都绑定到一个商店,这里有一个超级小的helper 。 你还可以使用动作创建者的array 。 因为可以以绑定到一个或者多个存储区,所以可以以指定一个存储区或者一个存储区 array 。

    // actions.jsexportconstadd=createAction('Add');exportconstsub=createAction('Sub');// reducer.jsimport*asactionsfrom'./actions';exportdefaultcreateReducer({
     [actions.add]: (state, payload) => state + payload,
     [actions.sub]: (state, payload) => state - payload
    }, 0);// store.jsimport*asactionsfrom'./actions';importreducerfrom'./reducer';conststore=createStore(reducer);assignAll(actions, store);exportdefaultstore;

    bindAll ( actionCreators,存储)

    参数

    • actionCreators ( 对象或者 array ): 要绑定的操作创建者。 如果是对象,它是 NAME -> 操作创建者的映射,在一次导入多个动作时很有用。
    • 存储 ( 对象或者 array ): 调度操作时的目标存储。 只能是一个或者多个 inside 一个 array 。

    用法

    assignAll 一样,你可以同时绑定多个动作创建者。

    import { bindAll } from'redux-act';importstorefrom'./store';import*asactionsfrom'./actions';exportbindAll(actions, store);

    批处理( 操作)

    参数

    • 动作 ( 对象| array ): 将一个动作包包装在另一个动作中,并在调度时立即将它们全部减少。 你还可以将多个操作作为参数调用这里函数。

    你将需要使用 raw 方法来执行这些操作。 请参见下面的用法。

    用法

    当你需要运行一系列操作而不会影响整个应用程序后,而是在完成所有操作之后。 例如如果在 react-redux 中使用 @connect,则默认情况下在每个操作之后调用它。 如果使用 batch,则只有在 array 中的所有操作都被减少后才会调用它。

    batch 是一个动作创建者,像任何使用 createAction 创建的。 如果需要,可以指定或者绑定它,特别是如果仅有一个存储区。 你甚至可以用 inside 减速器。 默认情况下启用它,但你可以删除它并将它的返回。

    import { createAction, createReducer, batch } from'redux-act';// Basic actionsconstinc=createAction();constdec=createAction();constreducer=createReducer({
     [inc]:state=> state +1,
     [dec]:state=> state -1,
    }, 0);conststore=createStore(reducer);// actions as argumentsstore.dispatch(batch(inc(), inc(), dec(), inc()));// actions as an arraystore.dispatch(batch([inc(), inc(), dec(), inc()]));store.getState(); // 4// Assigned actionsinc.assignTo(store);dec.assignTo(store);// You still need to dispatch the batch action// You will need to use the 'raw' function on the action creators to prevent// the auto-dipatch from the assigned action creatorsstore.dispatch(batch(inc.raw(), dec.raw(), dec.raw()));store.dispatch(batch([inc.raw(), dec.raw(), dec.raw()]));store.getState(); // 2// Let's de-assign our actionsinc.assignTo(undefined);dec.assignTo(undefined);// You can bind batchconstboundBatch=batch.bindTo(store);boundBatch(inc(), inc());store.getState(); // 4// You can assign batchbatch.assignTo(store);batch(dec(), dec(), dec());store.getState(); // 1// You can remove batch from a reducerreducer.off(batch);batch(dec(), dec());store.getState(); // 1// You can put it backreducer.on(batch, (state, payload) =>payload.reduce(reducer, state));batch(dec(), dec());store.getState(); // -1

    disbatch ( 存储| 调度,[actions] )

    参数

    • | 分派 ( 。对象,即Redux存储区或者调度函数): 将 disbatch 函数添加到存储区,如果它是唯一参数。 就像 dispatch 但是对于几个将要作为单个操作进行批处理的动作。
    • 动作 ( array,可选): 要作为一批操作调度的操作的array 。

    用法

    // All samples will display both syntax with and without an array// They are exactly the sameimport { disbatch } from'redux-act';import { inc, dec } from'./actions';// Add 'disbatch' directly to the storedisbatch(store);store.disbatch(inc(), dec(), inc());store.disbatch([inc(), dec(), inc()]);// Disbatch immediately from storedisbatch(store, inc(), dec(), inc());disbatch(store, [inc(), dec(), inc()]);// Disbatch immediately from dispatchdisbatch(store.dispatch, inc(), dec(), inc());disbatch(store.dispatch, [inc(), dec(), inc()]);

    asError ( 操作)

    参数

    • 动作 ( 对象): 标准Redux动作( 带有 type 属性)

    error 属性设置为 true

    import { createAction, asError } from'redux-act';constgoodAction=createAction();goodAction.error; // falseconstbadAction=asError(goodAction);badAction.error; // true

    用户定义类型

    这主要是内部的内容,并且只在开发和测试过程中帮助。

    就像你所知道的,每个动作都有一个类型。 redux-act 将确保每个操作创建者类型都是唯一的。 如果你没有使用可以序列化操作,那么你很好地进行动态生成和独特的所有类型。 但是如果使用它们,默认情况下,不会阻止你创建具有相同类型的两个操作创建者。 如果你使用已经使用的类型调用 createAction,则抛出 redux-act,这很好,除非运行测试时。

    在测试期间,你可能需要重新设置所有类型,以新鲜开始,以防止 redux-act 在测试之间。 为此,你有一个小的API来管理由 redux-act 存储的类型。

    import { types } from'redux-act';// Add a type and prevent any action creator from using it from now ontypes.add('MY_TYPE');types.add('MY_TYPE_BIS');// Remove a type, you can use it again in an action creatortypes.remove('MY_TYPE_BIS');// Test if a type is already usedtypes.has('MY_TYPE'); // truetypes.has('MY_TYPE_BIS'); // false// Check if a type is already used,// will throw TypeError if sotypes.check('MY_TYPE') // throw TypeErrortypes.check('MY_TYPE_BIS') // do nothing (return undefined)// Return all used typestypes.all(); // [ 'MY_TYPE' ]// Remove all typestypes.clear();// Disable all type checking meaning you can now have several actions// with the same type. This is needed for HMR (Hot Module Replacement)// but never never never enable it in productiontypes.disableChecking();// Set back type checkingtypes.enableChecking();

    cookbook

    兼容性

    redux-act 与任何其他Redux库完全兼容,它只使用 type 字符串。

    // Mixing basic and redux-act actions inside a reducerimport { createAction, createReducer } from'redux-act';// Standard Redux action using a string constantconstINCREMENT_TYPE='INCREMENT';constincrement= () => ({ type:INCREMENT_TYPE });constdecrement=createAction('decrement');constreducer=createReducer({
     [INCREMENT_TYPE]: (state) => state +1,
     [decrement]: (state) => state -1,
    }, 0);reducer.has(INCREMENT_TYPE); // truereducer.has(decrement); // true
    // Using redux-act actions inside a basic reducerimport { createAction } from'redux-act';// Standard Redux action using a string constantconstINCREMENT_TYPE='INCREMENT';constincrement= () => ({ type:INCREMENT_TYPE });constdecrement=createAction('decrement');functionreducer(state=0, action) {
     switch (action.type) {
     caseINCREMENT_TYPE:
     return state +1;
     break;
     casedecrement.getType():
     return state -1;
     break;
     default:
     return state;
     }
    };

    添加和删除操作

    使用处理程序对象。

    consthandlers= {};constreducer=createReducer(handlers, 0);conststore=createStore(reducer);constincrement=createAction().assignTo(store);
    handlers[increment] = (state) => state +1;increment(); // store.getState() === 1increment(); // store.getState() === 2delete(handlers[increment]);increment(); // store.getState() === 2increment(); // store.getState() === 2

    利用减速器的onoff 函数。 这些函数将可用,无论你使用什么 Pattern 创建减速器。

    constreducer=createReducer({}, 0);conststore=createStore(reducer);constincrement=createAction().assignTo(store);reducer.on(increment, (state) => state +1);increment(); // store.getState() === 1increment(); // store.getState() === 2reducer.off(increment);increment(); // store.getState() === 2increment(); // store.getState() === 2

    利用函数工厂的onoff 函数创建减速器。

    conststore=createStore(()=>0));constincrement=createAction().assignTo(store);constreducer=createReducer(function (on, off) {
     on(increment, state=> {
     // Just for fun, we will disable increment when reaching 2// (but we will still increment one last time)if (state ===2) {
     off(increment);
     }
     return state +1;
     });
    }, 0);store.replaceReducer(reducer);increment(); // store.getState() === 1increment(); // store.getState() === 2increment(); // store.getState() === 3increment(); // store.getState() === 3increment(); // store.getState() === 3

    异步操作

    import {createStore, applyMiddleware} from'redux';importthunkMiddlewarefrom'redux-thunk';import {createAction, createReducer} from'redux-act';conststart=createAction();constsuccess=createAction();constreducer=createReducer({
     [start]: (state) => ({ ...state, running:true }),
     [success]: (state, result) => ({ running:false, result })
    }, {
     running:false,
     result:false});// 1) You can use the same way as the Redux samples// using thunk middlewareconstcreateStoreWithMiddleware=applyMiddleware(
     thunkMiddleware
    )(createStore);conststore=createStoreWithMiddleware(reducer);functionfetch() {
     // We don't really need the dispatch// but here it is if you don't bind your actionsreturnfunction (dispatch) {
     // state: { running: false, result: false }dispatch(start());
     // state: { running: true, result: false }returnnewPromise(resolve=> {
     // Here, you should probably do a real async call,// like, you know, XMLHttpRequest or Global.fetch stuffsetTimeout(() =>resolve(1)
    , 5);
     }).then(result=>dispatch(success(result))
     // state: { running: false, result: 1 } );
     };
    }store.dispatch(fetch()).then(() => {
     // state: { running: false, result: 1 }});// 2) You can enjoy the redux-act binding// and directly call the actionsconststore=createStore(reducer);start.assignTo(store);success.assignTo(store);functionfetch() {
     // state: { running: false, result: false }start();
     // state: { running: true, result: false }returnnewPromise(resolve=> {
     // Here, you should probably do a real async call,// like, you know, XMLHttpRequest or Global.fetch stuffsetTimeout(() =>resolve(1)
    , 5);
     }).then(result=>success(result)
     // state: { running: false, result: 1 } );
    }fetch().then(() => {
     // state: { running: false, result: 1 }});

    启用或者禁用批处理

    因为 batch 是一个操作创建者,所以可以以从任何减速器中添加和删除它。

    import { createReducer, batch } from'redux-act';constreducer=createReducer({});// Reducer no longer support batched actionsreducer.off(batch);// Put it back using the reducer itself as the reduce functionreducer.on(batch, (state, payload) =>payload.reduce(reducer, state));// Be careful if 'payload' option is falsereducer.options({ payload:false });reducer.on(batch, (state, action) =>action.payload.reduce(reducer, state));

    TypeScript

    我们在这个API周围构建了一些基本的typings,它将帮助你识别代码中的潜在问题。

    如果你可以使用现有的方法来创建减速器,TypeScript会工作,但这会使你的TypeScript TypeScript 。 因此,以下是创建减速器的推荐方法。

    import { createReducer, createAction } from'redux-act';const defaultState = {
     count: 0,
     otherProperties: any,
     ...};const add =createAction<number>('Increase count');const reducer =createReducer<typeofdefaultState>({}, defaultState);reducer.on(add, (state, payload) => ({
     ...state,
     count: state.count+payload}));

    使用 reducer.on() API,打印机将标识 add 设置的负载,并提供该类型作为负载。 一旦代码开始扩展,这就非常有用了。

    警告

    由于 TypeScript typings的一些限制,操作创建者有一些限制,但是你可以创建类型化操作创建者,假设你没有有效的。

    import { createAction } from'redux-act';const action =createAction<boolean>('Some type');const emptyAction =createAction('Another type');const otherAction =createAction<boolean>('Other action', (arg1, arg2) => ({ arg1, arg2 }));

    actionemptyAction 将提供输入支持,确保 action 提供一个布尔值,惟一的参数,或者 emptyAction 根本没有提供任何参数。

    otherAction,在otherhand上,可以以用任何参数调用,无论有什么负载减速器期望的。

    记录器

    redux-act 为一些记录器提供了改进日志记录,主要用于批处理操作。

    缺少你最喜欢的一个请打开一个问题或者请求请求,它将尽快添加。

    Redux日志记录程序

    import { applyMiddleware, createStore } from'redux';importcreateLoggerfrom'redux-logger';import { loggers } from'redux-act';// Init loggerconstlogger=createLogger({
     ...loggers.reduxLogger,
     // You can add you own options after that});// Same asconstlogger=createLogger({
     actionTransformer:loggers.reduxLogger.actionTransformer,
     logger:loggers.reduxLogger.logger,
     // You can add you own options after that});// Create the storeconststore=applyMiddleware(logger)(createStore)(/* reducer */);

    谢谢

    这对于创建 Redux@AlexGalays 非常感谢,我为创建fluxx插件took了很多灵感,我从中获得了大量灵感。

    测试

    如果你需要运行测试,只要你想生成覆盖报告,就可以使用 npm test 或者 npm run coverage

    许可证

    这里软件是 Apache 2许可证下的许可证,请在下面报价。

    版权所有 2015 Paul Dijou ( http://pauldijou.fr ) 。

    在Apache许可以证下许可以证版本 2.0 ("许可以证") ;你可以能不使用这里项目,除了符合许可以证。 你可以在 http://www.apache.org/licenses/LICENSE-2.0 获得许可证的副本。

    在规定的法律或者书面许可下,在许可条款下分发的软件在不保证任何种类的担保或者条件的前提下分发,或者明示或者隐含。 查看许可协议下特定语言的许可权限和限制的许可证。



    文章标签:act  RED  Action  actions  Reduce  Reducers  

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