feat: Data-driven Design Action Creators

[puppybits]

Description

createMutate is an async action creator that writes directly to Firestore.

const archiveTask = createMutate({
  action: 'ArchiveTask',
  read: ({ taskId, org }) => ({
    taskId: () => taskId,
    org: () => org,
  }),
  write: ({ uid, org, taskId }) => ({
        archived: true,
        updatedAt: ['::serverTimestamp'],
        updatedBy: uid,
        path: `orgs/${org}/tasks`,
        id: taskId,
      }),
 });

// component.js
dispatch(archiveTask({taskId: '999', org: 'my-organization'})).then(() => { navigateToPage(); });

The simplified typing for createMutate only needs 3 fields.

1. action is the name for the Redux action.
2. read is a function that takes public arguments and returns a Read object.
3. write is a function or array of functions that accepts a subset of the read keys and returns a Write object.

type FirestoreDocument = { [key: string]: any }
type PathId = { id: string; path: string };

type Write = PathId & FirestoreDocument;

type Read = PathId;
type ReadQuery = ReduxFirestoreQuerySetting;
type ReadProvider = () => unknown;

export type MutateActionCreator< ActionCreatorPayload , Reads> = (
  action: string,
  read: (args: ActionCreatorPayload) => {
    [Key in keyof Reads]: ReadQuery | Read | ReadProvider;
  },
  write: (reads: { [Key in Reads]: any }) => Write | Write[],
) => (args: ActionCreatorPayload) => Promise

To use createMutate first add Redux ToolKit by running yarn add @redux/toolkit.