Merge pull request #10 from davidkpiano/davidkpiano/initial-effects

Author: davidkpiano

.changeset/three-chefs-play.md

@@ -0,0 +1,38 @@
+---
+'use-effect-reducer': minor
+---
+
+Added support for initial effects, via the 2nd argument to `useEffectReducer`, which can either be a static `initialState` or a function that takes in `exec` and returns an initial state as well as executing initial effects:
+
+```js
+const fetchReducer = (state, event) => {
+  if (event.type === 'RESOLVE') {
+    return {
+      ...state,
+      data: event.data,
+    };
+  }
+
+  return state;
+};
+
+const getInitialState = exec => {
+  exec({ type: 'fetchData', someQuery: '*' });
+
+  return { data: null };
+};
+
+// (in the component)
+const [state, dispatch] = useEffectReducer(fetchReducer, getInitialState, {
+  fetchData(_, { someQuery }) {
+    fetch(`/some/api?${someQuery}`)
+      .then(res => res.json())
+      .then(data => {
+        dispatch({
+          type: 'RESOLVE',
+          data,
+        });
+      });
+  },
+});
+```

README.md

@@ -16,6 +16,7 @@ If you know how to [`useReducer`](https://reactjs.org/docs/hooks-reference.html#
 - [Quick Start](#quick-start)
 - [Named Effects](#named-effects)
 - [Effect Implementations](#effect-implementations)
+- [Initial Effects](#initial-effects)
 - [Effect Entities](#effect-entities)
 - [Effect Cleanup](#effect-cleanup)
 - [Replacing Effects](#replacing-effects)
@@ -216,6 +217,43 @@ const [state, dispatch] = useEffectReducer(someReducer, initialState, {
 });
 ```
 
+## Initial Effects
+
+The 2nd argument to `useEffectReducer(state, initialState)` can either be a static `initialState` or a function that takes in an effect `exec` function and returns the `initialState`:
+
+```js
+const fetchReducer = (state, event) => {
+  if (event.type === 'RESOLVE') {
+    return {
+      ...state,
+      data: event.data,
+    };
+  }
+
+  return state;
+};
+
+const getInitialState = exec => {
+  exec({ type: 'fetchData', someQuery: '*' });
+
+  return { data: null };
+};
+
+// (in the component)
+const [state, dispatch] = useEffectReducer(fetchReducer, getInitialState, {
+  fetchData(_, { someQuery }) {
+    fetch(`/some/api?${someQuery}`)
+      .then(res => res.json())
+      .then(data => {
+        dispatch({
+          type: 'RESOLVE',
+          data,
+        });
+      });
+  },
+});
+```
+
 ## Effect Entities
 
 The `exec(effect)` function returns an **effect entity**, which is a special object that represents the running effect. These objects can be stored directly in the reducer's state:
@@ -348,6 +386,27 @@ const SomeComponent = () => {
 };
 ```
 
+The 2nd argument to `useEffectReducer(...)` can either be a static `initialState` or a function that takes in `exec` and returns an `initialState` (with executed initial effects). See [Initial Effects](#initial-effects) for more information.
+
+```js
+const SomeComponent = () => {
+  const [state, dispatch] = useEffectReducer(
+    someEffectReducer,
+    exec => {
+      exec({ type: 'someEffect' });
+      return someInitialState;
+    },
+    {
+      someEffect(state, effect) {
+        // ...
+      },
+    }
+  );
+
+  // ...
+};
+```
+
 Additionally, the `useEffectReducer` hook takes a 3rd argument, which is the implementation details for [named effects](#named-effects):
 
 ```js

src/index.tsx

@@ -1,24 +1,28 @@
-import { useReducer, useEffect, useCallback, useRef } from 'react';
+import { useReducer, useEffect, useCallback, useRef, useMemo } from 'react';
 
 type CleanupFunction = () => void;
 
-export type EffectFunction<TState, TEvent> = (
+export type EffectFunction<
+  TState,
+  TEvent extends EventObject,
+  TEffect extends EffectObject<TState, TEvent>
+> = (
   state: TState,
-  effect: EffectObject<TState, TEvent>,
+  effect: TEffect,
   dispatch: React.Dispatch<TEvent>
 ) => CleanupFunction | void;
 
-export interface EffectObject<TState, TEvent> {
+export interface EffectObject<TState, TEvent extends EventObject> {
   [key: string]: any;
   type: string;
-  exec?: EffectFunction<TState, TEvent>;
+  exec?: EffectFunction<TState, TEvent, any>;
 }
 
 export type Effect<
   TState,
-  TEvent,
+  TEvent extends EventObject,
   TEffect extends EffectObject<TState, TEvent>
-> = TEffect | EffectFunction<TState, TEvent>;
+> = TEffect | EffectFunction<TState, TEvent, TEffect>;
 
 type EntityTuple<TState, TEvent extends EventObject> = [
   TState,
@@ -81,14 +85,14 @@ export interface EffectReducerExec<
   TEvent extends EventObject,
   TEffect extends EffectObject<TState, TEvent>
 > {
-  (effect: TEffect | EffectFunction<TState, TEvent>): EffectEntity<
+  (effect: TEffect | EffectFunction<TState, TEvent, TEffect>): EffectEntity<
     TState,
     TEvent
   >;
   stop: (entity: EffectEntity<TState, TEvent>) => void;
   replace: (
     entity: EffectEntity<TState, TEvent> | undefined,
-    effect: TEffect | EffectFunction<TState, TEvent>
+    effect: TEffect | EffectFunction<TState, TEvent, TEffect>
   ) => EffectEntity<TState, TEvent>;
 }
 
@@ -110,18 +114,26 @@ interface FlushEvent {
   count: number;
 }
 
-export function toEffect<TState, TEvent>(
-  exec: EffectFunction<TState, TEvent>
+export function toEffect<TState, TEvent extends EventObject>(
+  exec: EffectFunction<TState, TEvent, any>
 ): Effect<TState, TEvent, any> {
   return {
     type: exec.name,
     exec,
   };
 }
 
-interface EffectsMap<TState, TEvent> {
-  [key: string]: EffectFunction<TState, TEvent>;
-}
+export type EffectsMap<
+  TState,
+  TEvent extends EventObject,
+  TEffect extends EffectObject<TState, TEvent>
+> = {
+  [key in TEffect['type']]: EffectFunction<
+    TState,
+    TEvent,
+    TEffect & { type: key }
+  >;
+};
 
 const toEventObject = <TEvent extends EventObject>(
   event: TEvent['type'] | TEvent
@@ -138,26 +150,35 @@ const toEffectObject = <
   TEvent extends EventObject,
   TEffect extends EffectObject<TState, TEvent>
 >(
-  effect: TEffect | EffectFunction<TState, TEvent>,
-  effectsMap?: EffectsMap<TState, TEvent>
+  effect: TEffect | EffectFunction<TState, TEvent, TEffect>,
+  effectsMap?: EffectsMap<TState, TEvent, TEffect>
 ): TEffect => {
   const type = typeof effect === 'function' ? effect.name : effect.type;
-  const customExec = effectsMap ? effectsMap[type] : undefined;
+  const customExec = effectsMap
+    ? effectsMap[type as TEffect['type']]
+    : undefined;
   const exec =
     customExec || (typeof effect === 'function' ? effect : effect.exec);
   const other = typeof effect === 'function' ? {} : effect;
 
   return { ...other, type, exec } as TEffect;
 };
 
+export type InitialEffectStateGetter<
+  TState,
+  TEffect extends EffectObject<TState, any>
+> = (
+  exec: (effect: TEffect | EffectFunction<TState, any, TEffect>) => void
+) => TState;
+
 export function useEffectReducer<
   TState,
   TEvent extends EventObject,
   TEffect extends EffectObject<TState, TEvent> = EffectObject<TState, TEvent>
 >(
   effectReducer: EffectReducer<TState, TEvent, TEffect>,
-  initialState: TState,
-  effectsMap?: EffectsMap<TState, TEvent>
+  initialState: TState | InitialEffectStateGetter<TState, TEffect>,
+  effectsMap?: EffectsMap<TState, TEvent, TEffect>
 ): [TState, React.Dispatch<TEvent | TEvent['type']>] {
   const entitiesRef = useRef<Set<EffectEntity<TState, TEvent>>>(new Set());
   const wrappedReducer = (
@@ -175,7 +196,9 @@ export function useEffectReducer<
       return [state, stateEffectTuples.slice(event.count), nextEntitiesToStop];
     }
 
-    const exec = (effect: TEffect | EffectFunction<TState, TEvent>) => {
+    const exec = (
+      effect: TEffect | EffectFunction<TState, TEvent, TEffect>
+    ) => {
       const effectObject = toEffectObject(effect, effectsMap);
       const effectEntity = createEffectEntity<TState, TEvent, TEffect>(
         effectObject
@@ -191,7 +214,7 @@ export function useEffectReducer<
 
     exec.replace = (
       entity: EffectEntity<TState, TEvent>,
-      effect: TEffect | EffectFunction<TState, TEvent>
+      effect: TEffect | EffectFunction<TState, TEvent, TEffect>
     ) => {
       if (entity) {
         nextEntitiesToStop.push(entity);
@@ -216,10 +239,39 @@ export function useEffectReducer<
     ];
   };
 
+  const initialStateAndEffects: AggregatedEffectsState<
+    TState,
+    TEvent
+  > = useMemo(() => {
+    if (typeof initialState === 'function') {
+      const initialEffectEntities: Array<EffectEntity<TState, TEvent>> = [];
+
+      const resolvedInitialState = (initialState as InitialEffectStateGetter<
+        TState,
+        TEffect
+      >)(effect => {
+        const effectObject = toEffectObject(effect, effectsMap);
+        const effectEntity = createEffectEntity<TState, TEvent, TEffect>(
+          effectObject
+        );
+
+        initialEffectEntities.push(effectEntity);
+      });
+
+      return [
+        resolvedInitialState,
+        [[resolvedInitialState, initialEffectEntities]],
+        [],
+      ];
+    }
+
+    return [initialState, [], []];
+  }, []);
+
   const [
     [state, effectStateEntityTuples, entitiesToStop],
     dispatch,
-  ] = useReducer(wrappedReducer, [initialState, [], []]);
+  ] = useReducer(wrappedReducer, initialStateAndEffects);
 
   const wrappedDispatch = useCallback((event: TEvent | TEvent['type']) => {
     dispatch(toEventObject(event));