drmzn-redux v0.2.2

drmzn-redux

Actions, Reducers and action-reducers

Redux provides us with actions and reducers. Actions and reducers are meant to be separated, so reducers can be reused and be composable.

However, sometimes is more suitable to combine them at one place.

In order to use action-reducer, you create a namespace (shortcut for IIFE in typescript).

Every action-reducer function must have type, dispatch and reduce methods.

Action-reducer

export namespace mySimpleAction {
    export const type = 'TEST_TYPE';
    export const dispatch(store, payload) {
        store.dispatch({
            type,
            payload
        }); 
    }
    export const reduce(state, action) => immutable(state)
        .set('Some.section.subsection.test', action.payload)
        .set('Some.another.subsection.test', true)
        .value();
}

Here we are using object-path-immutable to update the state.

How to dispatch an action

actions.mySimpleAction.dispatch(store, payload)

To dispatch and action, you need to pass the initialized store object as first variable and your data object as payload.

How to use with createStore?

Import your action-reducers and pass them to actionReducer.

import { createStore } from 'redux';
import { actionReducer } from 'drmzn-redux';
import * as actions from './src/actions';

createStore(actionReducer(actions), ...);

What else you can find in this package?

hydrate

hydrate function that loads state from window.__PRELOADED_STATE__.

extension

extension function that loads Redux extension.

How to use:

import { createStore } from 'redux';
import { actionReducer, hydrate, extension } from 'drmzn-redux';
import * as actions from './src/actions';

createStore(actionReducer(actions), hydrate, extension);