Understanding Typescript-fsa


Consider:

const createAction = actionCreatorFactory('WIDGET');
export const fetchData = createAction.async<{ tld: string }, WidgetDTO>('FETCH');

createAction.async() takes 3 param types as follows and also a namespace (at end):
  params type
  success type
  error type

createAction.async() returns an object with type and 3 functions:
{
  type: "WIDGET/FETCH",
  started: ƒ,
  done: ƒ,
  failed: ƒ
}

Now if you call object.started() like so:
  fetchData.started({input: 'my param'})

...it will return an action as follows. Note the type value
{
  type: "WIDGET/FETCH_STARTED",
  payload: { input: "my param" }
}

If you call done() like so
  fetchData.done({
    params: { tld: 'param passed' },
    result: {
      publicUrl: 'string',
      tld: 'string',
    }}));

...it will return an action as follows. Note the type value
{
  type: "WIDGET/FETCH_DONE",
  payload: {
    params: {},
    result: {
}

Payload is always present but meaning is different by context, for started() versus done(). For started() payload is the input you passed, for done payload includes result.

You have to pass params for all started(), done(), error() calls.

Comments

Popular posts from this blog

deep dive into Material UI TextField built by mui

angular js protractor e2e cheatsheet

react-router v6.4+ loaders, actions, forms and more