Redux Action Registry.md

Redux Action Registry

Create an object with all your action creators. This makes it easier to debug your application, since now you can dispatch actions from the console or from the Redux Devtools Extension.

Usage

ActionRegistry['data/accountBalance'].SET_ACCOUNT_BALANCE // "ordoro/data/accountBalance/SET_ACCOUNT_BALANCE"
ActionRegistry['data/accountBalance'].setAccountBalance(3) // {type: "ordoro/data/accountBalance/SET_ACCOUNT_BALANCE", payload: 3}

store.dispatch(ActionRegistry['data/accountBalance'].setAccountBalance(3));  // state changes

It works by using webpack's require.context to require all the modules from a certain directory. This means it works even if your actions are very nested. It also means you don't have to manually import your actions into the action registry.

⚠️

Don't use this in your actual code. Only use this for debugging. Regular imports are much more explicit and aren't a hack:

import {setAccountBalance} from 'redux/actions/data/accountBalance

### Setup

```js
function requireAllActions(requireContext) {
    return requireContext.keys()
        .reduce((prev, key) => {
            const moduleName = key.replace(/.js$/, '').replace(/^.\//, '');
            return {
                ...prev,
                [moduleName]: requireContext(key),
            };
        }, {});
}

window.ActionRegistry = requireAllActions(require.context('../redux/actions', true, /.js$/));

ActionRegistry['data/accountBalance'].SET_ACCOUNT_BALANCE // "ordoro/data/accountBalance/SET_ACCOUNT_BALANCE"
ActionRegistry['data/accountBalance'].setAccountBalance(3) // {type: "ordoro/data/accountBalance/SET_ACCOUNT_BALANCE", payload: 3}

Based on

• https://twitter.com/TheLarkInn/status/760471998904438784
• https://gist.github.com/zalmoxisus/54925eed1805c095f0d1ebf5935fd5b1
• https://webpack.github.io/docs/context.html#require-context
• https://github.com/facebookincubator/create-react-app/pull/216/files#diff-4c7a6dd377c4a8533c45cfcc79c542e2R10