Install

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

Content

Usage

// 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

FAQ

Advanced usage

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.letappend=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=>'so meta!');// Metadata will be the third argument of the reduce functioncreateReducer({[metaAction]:(state,payload,meta)=>payload});

API

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

// 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');

action creator

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 }

letaction=createAction();letaction2=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

// 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

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

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

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(handlers, [defaultState])

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);

reducer

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

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

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

assignAll(actionCreators, stores)

// 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, stores)

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

batch(actions)

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(store | dispatch, [actions])

// 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(action)

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

types

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

Compatibility

// 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:returnstate+1;break;casedecrement.getType():returnstate-1;break;default:returnstate;}};

Adding and removing actions

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

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

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);}returnstate+1;});},0);store.replaceReducer(reducer);increment();// store.getState() === 1increment();// store.getState() === 2increment();// store.getState() === 3increment();// store.getState() === 3increment();// store.getState() === 3

Async actions

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 }});

Enable or disable 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

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

Caveats

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

Loggers

Redux Logger

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 */);

Thanks

Tests

License