Reductser

Redux with No Strings Attached

API Docs

You've read Erik Rasmussen's proposal, Ducks: Redux Reducer Bundles and Martin Hotell's Improved Redux type safety with TypeScript 2.8, but you're not satisfied? The amount of stringly-typed Redux code leaving a bad taste in your mouth and code smells all over your tests?

Look no further than to REDUCTSER! It's pronounced liked the famously sticky gray tape and it's just as powerful at gluing together your actions, reducers, and their behavior. Reductser can be used in a few different ways. Each with fewer strings than the last:

• Reductser regular, scoping actions with an actionFactory, which adds to each action a property that scopes the actions. All of the action type properties are generated based on their keys, and the types carry over to the reducer static type checking and completion in supporting editors.

• Reductser diet using the handlerAction constructor exclusively, the reducer becomes a simple if statement with no strings except the reducer name.

• Reductser zero using the reductser constructor, even the reducer is now scoped by its key when supplied to a reductserFactory.

Here's what the the action creator type checking and code completion looks like:

Recipes

Add the reductser library to your project:

npm install --save reductser

All of these recipes start with the following import, interface, and function:

import {
  actionFactory,
  ActionUnion,
  handlerAction,
  payloadAction,
  reductser,
  simpleAction,
} from 'reductser';

interface LocationState {
  latitude?: number;
  longitude?: number;
  error?: string;
}

function getInitialState(): LocationState {
  return {
    latitude: undefined,
    longitude: undefined,
  };
}

Reductser Regular

Easier to work with existing reducers, Reductser handles scoping based on keys. Code completion and type checking works on these scoped actions and their payloads.

const locationActionMap = {
  Clear: simpleAction(),
  Set: payloadAction<{
    latitude: number;
    longitude: number;
  }>(),
  GoWest: handlerAction<LocationState, number>((state, distance): LocationState => ({
    ...state,
    longitude: state.longitude ? state.longitude - distance : undefined,
  })),
};

export const locationAction = actionFactory(locationActionMap, 'LOCATION');

type LocationAction = ActionUnion<typeof locationAction>;

export default function reducer(state = getInitialState(), action: LocationAction): LocationState {
  switch (action.reducer) {
    case 'LOCATION': {
      switch (action.type) {
        case 'Set': {
          const { latitude, longitude } = action.payload;
          return { ...state, latitude, longitude };
        }
        case 'Clear':
          return { ...state, latitude: undefined, longitude: undefined };
        default:
          return action.handler(state);
      }
    }
    default:
      return state;
  }
}

Reductser Diet

Converting all of the actions to use the handlerAction constructor allows removing every string except the reducer name.

const locationActionMap = {
  Clear: handlerAction<LocationState, void>(getInitialState),
  Set: handlerAction<LocationState, { latitude: number; longitude: number }>(
    (state, { latitude, longitude }) => ({
      ...state,
      latitude,
      longitude,
    }),
  ),
  GoWest: handlerAction<LocationState, number>((state, distance): LocationState => ({
    ...state,
    longitude: state.longitude ? state.longitude - distance : undefined,
  })),
};

export const locationAction = actionFactory(locationActionMap, 'LOCATION_DIET');

type LocationAction = ActionUnion<typeof locationAction>;

export default function reducer(state = getInitialState(), action: LocationAction): LocationState {
  if (action.reducer === 'LOCATION_DIET') {
    return action.handler(state);
  }
  return state;
}

Reductser Zero

Finally, we can remove even that string by using the reductser constructor, and we get (for free!) scoped actions using the reductserFactory. (See just below in Tying it all together).

const locationActionMap = {
  Clear: handlerAction<LocationState, void>(getInitialState),
  Set: handlerAction<LocationState, { latitude: number; longitude: number }>(
    (state, { latitude, longitude }) => ({
      ...state,
      latitude,
      longitude,
    }),
  ),
  GoWest: handlerAction<LocationState, number>((state, distance): LocationState => ({
    ...state,
    longitude: state.longitude ? state.longitude - distance : undefined,
  })),
};

export default reductser(
  getInitialState,
  locationActionMap,
  (state, action) => action.handler(state),
);

Tying it all together

The first two recipes produce regular Redux reducers and action creators, but what about this? To use a reductser with combineReducers, we use a reductserFactory. The actions key provides scoped action creators for every reductser, and the reducers key can be used with combineReducers, either as an argument or using the spread operator:

import { combineReducers } from 'redux';

import { reductserFactory } from 'reductser';

import location from './location';
import locationDiet from './location-diet';
import locationZero from './location-zero';

const { actions, reducers } = reductserFactory({
  locationZero,
});

export { actions };

export const reducer = combineReducers({
  location,
  locationDiet,
  ...reducers,
});

Disclaimer

No strings, despite certain strongly held beliefs about them, were harmed in the making of this library.