Proposal implementation of handleActions

Really nice solution for typing Redux! It’s exactly what I’ve been looking for for a while! Thanks! 😄

Feature ~request~ proposal

Use case(s)

One thing I really like from redux-actions is handleActions. For me it’s much cleaner than switch statements.

The problem is it doesn’t play well with rex-tils’s approach, which is much better IMHO.

I created this version of handleActions:

const handleActions = <
  State,
  Types extends string,
  Actions extends ActionsUnion<{ [T in Types]: AnyFunction }>
>(
  handler: {
    [T in Types]: (state: State, action: ActionsOfType<Actions, T>) => State
  },
  initialState: State,
) => (state = initialState, action: Actions): State =>
  handler[action.type] ? handler[action.type](state, action) : state;

Which can be used like this:

interface State {
  foo: boolean,
  bar: number,
}

enum Types {
  FOO = 'FOO',
  BAR = 'BAR',
}

const Actions = {
  foo: () => createAction(Types.FOO),
  bar: (bar: number) => createAction(Types.FOO, bar),
}

const reducer = handleActions<State, Types, Actions>(
  {
    [Types.FOO]: (state) => ({ ...state, foo: !state.foo }),
    [Types.BAR]: (state, { payload }) => ({ ...state, bar: payload, }),
  },
  { foo: true, bar: 0 },
)

Enums are not necessary, it works with constants but requires a few lines more:

...

const FOO = 'FOO'
const BAR = 'BAR'

type Types =
  | typeof FOO
  | typeof BAR

...

Props

• Works as the switch version, type of action is inferred for each case, but much less boilerplate
• The handler object expects all the types to be “handled” (i.e. you get a type error if one of the action types is not covered)

Cons

• handleActions expects 3 type parameters. I tried to find a way to make it work only with State and Actions but I’m not sure is possible. Maybe I’m missing something.

If you think this is worth adding to rex-tils I can create a Pull Request.

[raybooysen]

You absolute hero! I’ve been battling with my implementation of Handler because I didn’t know how to express the key in the actions type properly

type Handler<State, ActionType extends string, Actions> = 
  (s: State, a: ActionsOfType<Actions, ActionType>) => State

const barHandler: Handler<State, 'bar', Actions> =
  (s, { payload }) => ({n: s.n + payload})

The use of bar here is what I was missing which made my handlers not pick up the change in action shapes. I really appreciate this, ty

[gillchristian]

Thanks will give it a try. Checking your code’s TS, there is still the error with the handler object. How are you disabling this error?

I found out about the error when you pointed it out, it’s not shown in my editor but it is on the playground. Probably because of a different TS config.

BTW, none of this is an indictment on your code, I’ve just been grappling with the same sort of problem trying to ensure that all our reducers pick up the changes to actions.

Of course 🎉

---

I’ve been using the handlers inline all the time, so I never had the need, but it really makes sense to extract them. Found a way to do it with ActionsOfType. It’s a bit verbose on the types, so I personally prefer the handlers inline. But hey, it’s possible 🎉

type Handler<State, ActionType extends string, Actions> = 
  (s: State, a: ActionsOfType<Actions, ActionType>) => State

const barHandler: Handler<State, 'bar', Actions> =
  (s, { payload }) => ({n: s.n + payload})

handleActions<State, Types, Actions>(
    {
        foo: (s) => ({n: s.n + 1}),
        bar: barHandler,
    },
    { n: 0},
)

Updated the playground: http://bit.ly/2F1V0Gz

And I think I will add it to the library when I get some time.

EDIT: added Handler to @housinganywhere/safe-redux https://github.com/housinganywhere/safe-redux/pull/4