[flwralex]

Example of "action-reducer" - combine action and reducer as one IIFE. Use object-path-immutable to update the state.

In any action.ts file you can have as many actions as you wish. Every action has type, dispatch and reduce methods:

  export namespace indexSaveSsl {
    export const type = 'INDEX_SAVE_SSL';
    export const dispatch = (store, response) => {
      store.dispatch({
        type,
        data: response.data
      });
    };
    export const reduce = (state, action) => immutable(state)
      .set('Reports.data.ssl', {})
      .set('Reports.data.ssl.result', action.data)
      .set('Tools.options.ssl.test_running', false)
      .value();
  }

This is typescript namespace, but compiles to IIFE.

This is how actions is combined:

  export const actions = (() => {
    // import main actions via webpack
    const actionsMain = require.context('app/', true, /actions\.ts$/);
    const mainFinal = actionsMain.keys().reduce((prev, key) => Object.assign(prev, actionsMain(key)), {});
    return mainFinal;
  })();

You can call it:

  actions.indexSaveSsl.dispatch(store, resultSsl);

And here how to generate reducers from actions:

  const reducer = (state = {}, action) => {
    // main reducer
    const result = Object.keys(actions)
      .filter((item) => actions[item].type === action.type)
      .map((item) => actions[item].reduce(state, action));
    return result[0] || state;
  };

  createStore(reducer, hydrate, extension);

No switch statements and reducers.