Added feature to call other stores

Author: minajevs

README.MD

@@ -249,6 +249,35 @@ await store.getTodos()
 
 </p></details>
 
+#### Calling other stores
+Sometimes you would like to call other store action from an action. You can't use `React.useContext` because of specific hook rules in React. Hook amount should never change during runtime and only way to supply that is to initialize all dependency contexts before bootstraping actions.
+
+You can call actions in other stores by providing dependency contexts as a 3rd parameter to `createStoreContext`. Those contexts will be mapped to corresponding stores internally and will be available in `stores` object in `{setState, action, stores}`  argument of action creator.
+
+Example:
+```tsx
+const [todoContext, Provider] = createStoreContext({todos: []}, {
+    addTodo: ({state, setState}, todo) => {
+        setState({todos: [...state.todos, todo]})
+    },
+})
+const [mainContext, Provider] = createStoreContext({message: ''}, {
+    someAction: ({setState, stores}, name) => {
+        const { todos } = stores.todoContext // stores.todoContext is a "todo store" ({todos: [], addTodo: (todo) => void})
+        const newMessage = `Hello, ${name}, you have ${todos.length} todos!`
+        setState({message: newMessage})
+    },
+}, {todoContext})
+...
+// Usage
+const todoStore = React.useContext(todoContext)
+const mainStore = React.useContext(mainContext)
+todoStore.addTodo('buy milk')
+todoStore.addTodo('learn typescript')
+mainStore.someAction('Dmitrijs')
+// mainStore.message is "Hello, Dmitrijs, you have 2 todos!" 
+```
+
 ### TODO:
 * Documentation sections about what benefits does TypeScript gives
 * Full example projects

src/index.tsx

@@ -24,42 +24,71 @@ export type Tail<T> = T extends Array<any>
     API Types
 */
 
-type ContextReference<TState> = {
+type ContextReference<TState, TContexts extends Contexts> = {
     state: TState
     setState: React.Dispatch<React.SetStateAction<TState>>
+    stores: InferStores<TContexts>
 }
 
-type Action<TState, TArgs extends never[]= never[], TReturn = any> =
-    (contextReference: ContextReference<TState>, ...args: TArgs) => TReturn
+type Action<TState, TContexts extends Contexts, TArgs extends never[]= never[], TReturn = any> =
+    (contextReference: ContextReference<TState, TContexts>, ...args: TArgs) => TReturn
 
-type Actions<TState> = { [key: string]: Action<TState> }
+type Actions<TState, TContexts extends Contexts> = { [key: string]: Action<TState, TContexts> }
 
-type MappedActions<TState, TActions extends Actions<TState>> = {
+type MappedActions<TState, TContexts extends Contexts, TActions extends Actions<TState, TContexts>> = {
     [P in keyof TActions]: (...args: DropFirst<Params<TActions[P]>>) => RetType<TActions[P]>
 }
 
-type Store<TState, TActions extends Actions<TState>> =
-    TActions extends undefined ? TState : TState & MappedActions<TState, TActions>
+type Store<TState, TContexts extends Contexts, TActions extends Actions<TState, TContexts>> =
+    TActions extends undefined ? TState : TState & MappedActions<TState, TContexts, TActions>
 
+type Context<T = any> = React.Context<T>
+type Contexts = { [key: string]: Context }
+
+export type Params1<T extends (...args: never[]) => unknown> = T extends (...args: infer P) => any ? P : never;
+
+type InferStore<TContext extends React.Context<any>> =
+    TContext extends React.Context<infer TStore> ? TStore : never
+
+type InferStores<TContexts extends Contexts> = {
+    [P in keyof TContexts]: InferStore<TContexts[P]>
+}
 /*
     Logic
 */
 
-export default function createStoreContext<TState, TActions extends Actions<TState> = {}>(
-    initialState: TState,
-    actions?: TActions
-): [React.Context<Store<TState, TActions>>, React.FC] {
-    const store = { ...initialState, ...mapActionsToDefault(initialState, actions) } as Store<TState, TActions>
+export default function createStoreContext<
+    TState,
+    TContexts extends Contexts,
+    TActions extends Actions<TState, TContexts> = {},
+    >(
+        initialState: TState,
+        actions: TActions = {} as TActions,
+        contexts: TContexts = {} as TContexts
+    ): [React.Context<Store<TState, TContexts, TActions>>, React.FC] {
+    // tslint:disable-next-line: max-line-length
+    const store = { ...initialState, ...mapActionsToDefault(initialState, actions) } as Store<TState, TContexts, TActions>
     const context = React.createContext(store)
 
     const provider: React.FC = props => {
         let [_state, setState] = React.useState(initialState)
+
+        const stores = Object.keys(contexts).reduce(
+            (obj, key) => {
+                return {
+                    ...obj,
+                    [key]: React.useContext(contexts[key])
+                }
+            },
+            {} as InferStores<TContexts>)
+
         const _actions = mapActionsToDispatch({
             state: _state,
-            setState
+            setState,
+            stores
         }, actions)
 
-        const _store = { ..._state, ..._actions } as Store<TState, TActions>
+        const _store = { ..._state, ..._actions } as Store<TState, TContexts, TActions>
 
         return (
             <context.Provider value={_store}>
@@ -71,37 +100,42 @@ export default function createStoreContext<TState, TActions extends Actions<TSta
     return [context, provider]
 }
 
-function mapActionsToDispatch<TState, TActions extends Actions<TState>>(
-    contextReference: ContextReference<TState>,
+function mapActionsToDispatch<TState, TContexts extends Contexts, TActions extends Actions<TState, TContexts>>(
+    contextReference: ContextReference<TState, TContexts>,
     actions?: TActions,
-): MappedActions<TState, TActions> {
-    if (actions === undefined) return {} as MappedActions<TState, TActions>
+): MappedActions<TState, TContexts, TActions> {
+    if (actions === undefined) return {} as MappedActions<TState, TContexts, TActions>
     return Object.keys(actions).reduce(
         (obj, key) => {
             return {
                 ...obj,
                 [key]: (...args: never[]) => actions[key](contextReference, ...args)
             }
         },
-        {} as MappedActions<TState, TActions>)
+        {} as MappedActions<TState, TContexts, TActions>)
 }
 
-function mapActionsToDefault<TState, TActions extends Actions<TState>>(
+function mapActionsToDefault<TState,
+    TActions extends Actions<TState, TContexts>,
+    TContexts extends Contexts
+>(
     initialState: TState,
     actions?: TActions,
-): MappedActions<TState, TActions> {
-    if (actions === undefined) return {} as MappedActions<TState, TActions>
+): MappedActions<TState, TContexts, TActions> {
+    if (actions === undefined) return {} as MappedActions<TState, TContexts, TActions>
 
     return Object.keys(actions).reduce(
         (obj, key) => {
-            const contextReference: ContextReference<TState> = {
+            const contextReference: ContextReference<TState, TContexts> = {
                 state: initialState,
+                stores: {} as InferStores<TContexts>,
+                // tslint:disable-next-line: max-line-length
                 setState: (value) => { throw new Error(`[${key}]: Can't invoke 'setState' with ${value} because provider does not exist`) }
             }
             return {
                 ...obj,
                 [key]: (...args: never[]) => actions[key](contextReference, ...args)
             }
         },
-        {} as MappedActions<TState, TActions>)
+        {} as MappedActions<TState, TContexts, TActions>)
 }

tests/tests.tsx

@@ -231,22 +231,25 @@ describe('Logic', () => {
 
     it('can call other context from action', () => {
         const [context1, Provider1] = createContextState({ state1: 'before' }, {
-            action1: () => {
+            action1: ({ setState }) => {
                 return 'value-from-action1'
             },
         })
 
         const [context2, Provider2] = createContextState({ state2: 'before' }, {
-            action2: (_) => {
-                const store = React.useContext(context1)
-                return store.action1()
+            action2: ({ stores }) => {
+                return stores.context1.action1()
             },
-        })
+        }, { context1 })
 
         const Consumer: React.FC = props => {
-            const store = React.useContext(context2)
+            const store1 = React.useContext(context1)
+            const store2 = React.useContext(context2)
+
+            const result = store2.action2()
 
-            expect(store.action2()).toBe('value-from-action1')
+            //expect(store1.state1).toBe('after')
+            expect(result).toBe('value-from-action1')
 
             verify()