root action

[lstkz]

I am confused how to create the root action properly.

From docs:

// example reducer
export const reducer: Reducer<State> = (state = 0, action: RootAction) => {

// root actions
export type RootAction =
  | ReactRouterAction
  | CountersActions[keyof CountersActions]
  | TodosActions[keyof TodosActions]
  | ToastsActions[keyof ToastsActions];

// example action creators
import { createAction, getType } from 'react-redux-typescript';

// Action Creators
export const actionCreators = {
  incrementCounter: createAction('INCREMENT_COUNTER'),
  showNotification: createAction('SHOW_NOTIFICATION', 
    (message: string, severity: Severity = 'default') => ({
      type: 'SHOW_NOTIFICATION', payload: { message, severity },
    })
  ),
};

CountersActions[keyof CountersActions] is equal to action creator types, not action types.
Should I define both action creator and actions separately?
Also ToastsActions[keyof ToastsActions]; doesn't work, but typeof ToastsActions[keyof typeof ToastsActions]; works.

[jakubrohleder]

I've just found this issue, I think it should help you: piotrwitek/typesafe-actions#4

[piotrwitek]

Hello @lsentkiewicz
Sorry but RootAction is currently outdated.

I'm in the middle of rework of entire action creators and reducer section as I made a few improvements in typing patterns for them, so expect a new solution soon.

At this moment you can check the issue linked above or check the RootAction file that is located in the Playground Project: https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/playground/src/redux/root-action.ts

[piotrwitek]

Please check a new and updated Store Configuration Section

[lstkz]

thanks @piotrwitek!

[lstkz]

In the current readme.md

export const allActions = {
  ...countersAC,
  ...todosAC,
  ...toastsAC,
};

const returnOfActions =
  Object.values(allActions).map(getReturnOfExpression);

should be changed to

export const allActions = [
  ...Object.values(countersAC),
  ...Object.values(todosAC),
  ...Object.values(toastsAC),
];

const returnOfActions = allActions.map(getReturnOfExpression);

because multiple modules can contain the same names.
Example countersAC.loaded() and todosAC.loaded(), and duplicated names are overriden.

[piotrwitek]

@lsentkiewicz yes that make sense, thanks!
I'll update it with the next PR which I'm working on right now.