1_before.js

// 1. some-component.js

dispatch(makeSomeMagic({ focus: 'pokus' }));

// 2. action-creators.js

export makeSomeMagic = (data) => {
  return { type: constants.MAKE_SOME_MAGIC, payload: data };
}

// 3. constans.js

const export MAKE_SOME_MAGIC = 'MAKE_SOME_MAGIC';

// 4. reducers.js

const reducers = {
  [constants.MAKE_SOME_MAGIC]: (state, action) => {
    // finally do some magic here...
  };
}

2_after.js

// 1. some-component.js

dispatch(makeSomeMagic({ focus: 'pokus' }));

// 2. some-handler.j

const SomeMagicHander = (reducerFactory) => {
  const MAKE_SOME_MAGIC = 'MAKE_SOME_MAGIC';

  const reducer = (state, action) => {
    // finally do some magic here...
  };
  
  const action = (data) => {
    return { type: MAKE_SOME_MAGIC, payload: data };
  }

  return {
    id: MAKE_SOME_MAGIC,
    reducer,
    action
  };
}

export SomeMagicHandler;