@mindbox/redux-helpers

Redux helpers

Typed factories for your reducers and actions.

Install

npm install --save @mindbox/redux-helpers

Usage

// state.ts
export interface State
{
    currentText: string;
    // ... other fields
}

// reducer.ts -- how to create typed reducer
import { createFactory } from '@mindbox/redux-helpers';
import { State } from './state';

export interface Payload {
    newText: string;
}

export const BUTTON_CLICK = createFactory<Payload>("BUTTON_CLICK");

export reducer = BUTTON_CLICK.createReducer<State>(
    (state, action) => {
        return {
            ...state,
            currentText: action.payload.newText
        }
    },
    {
        currentText: "",
        // ... other fields
    }
);

// How to dispatch BUTTON_CLICK action
import { BUTTON_CLICK, Payload } from './reducer';
import { State } from './state';
import { Dispatch } from 'redux';

export mapDispatchToProps = (dispatch: Dispatch<State>) => {
    return {
        onButtonClick: () => {
            let payload: Payload = {
                newText: "test"
            };

            // note: this is type-safe
            dispatch(BUTTON_CLICK.createAction(payload));
        }
    };
}

Build

tsc ts/helpers.ts --outDir ./js/ --target es5