resolves #84

resolves #105

Author: quisido

README.md

@@ -97,6 +97,8 @@ with deeply nested objects, a
       * [removeCallback](#removecallback)
       * [resetGlobal](#resetglobal)
       * [setGlobal](#setglobal)
+      * [WithGlobal](#withglobal)
+      * [withInit](#withinit)
 * [Frequently Asked Questions](https://github.com/CharlesStover/reactn/blob/master/FAQ.md)
 * [Support](#support)
 
@@ -123,7 +125,7 @@ attempt to render.
 It is recommended that you initialize the global state just prior to mounting
 with `ReactDOM`.
 
-```JavaScript
+```javascript
 import React, { setGlobal } from 'reactn';
 import ReactDOM from 'react-dom';
 import App from './App';
@@ -156,7 +158,7 @@ functions.
 In order to tell TypeScript the shape of your global state when you are not using
 a Provider, create a file at `src/global.d.ts` with the following contents:
 
-```JavaScript
+```javascript
 import 'reactn';
 
 declare module 'reactn/default' {
@@ -223,7 +225,7 @@ directly into the React namespace. As a result, `Component` and `PureComponent`
 will have access to the `global` and `dispatch` member variables and
 `setGlobal` method.
 
-```JavaScript
+```javascript
 import React from 'reactn'; // <-- reactn
 import Card from '../card/card';
 
@@ -273,7 +275,7 @@ By importing React and ReactN separately, the React namespace remains
 unchanged. You can inject ReactN's global functionality into your vanilla React
 component by using the `@reactn` decorator imported from the `reactn` package.
 
-```JavaScript
+```javascript
 import React from 'react';
 import reactn from 'reactn'; // <-- reactn
 import Card from '../card/card';
@@ -324,7 +326,7 @@ export default class Cards extends React.PureComponent {
 Using [React Hooks](https://reactjs.org/docs/hooks-intro.html), you can harness
 `useGlobal` to access the global state.
 
-```JavaScript
+```javascript
 import React, { useGlobal } from 'reactn'; // <-- reactn
 import Card from '../card/card';
 
@@ -354,7 +356,7 @@ export default Cards;
 You may also use the `useDispatch` hook analogously to the `useReducer` hook by
 providing a function to `useDispatch`.
 
-```JavaScript
+```javascript
 import React, { useDispatch } from 'reactn'; // <-- reactn
 
 const incrementReducer = (global, dispatch, action) => ({
@@ -385,7 +387,7 @@ By providing a second parameter to `useDispatch` that is the key of the global
 state, the return value of that reducer will set that property of the global
 state. This allows you to write your reducers similar to React's `useReducer`.
 
-```JavaScript
+```javascript
 import React, { useDispatch } from 'reactn'; // <-- reactn
 
 const incrementReducer = (count, action) =>
@@ -422,7 +424,7 @@ new global state will trigger the very same callback.
 
 The only parameter is the callback function.
 
-```JavaScript
+```javascript
 import { addCallback, setGlobal } from 'reactn';
 
 // Every time the global state changes, this function will execute.
@@ -446,7 +448,7 @@ setGlobal({ value: 1 });
 The return value of `addCallback` is a function that, when executed, removes
 the callback.
 
-```JavaScript
+```javascript
 import { addCallback, setGlobal } from 'reactn';
 
 const removeAlert = addCallback(global => {
@@ -479,7 +481,7 @@ when dispatching. The reducer function that you _use_ when dispatching does not
 contain the global state or map of reducers. Those are prefixed for you
 automatically.
 
-```JavaScript
+```javascript
 import { addReducer, setGlobal, useDispatch, useGlobal } from 'reactn';
 
 // Initialize the global state with the value 0.
@@ -523,7 +525,7 @@ For a class component, the analogous method is
 The `dispatch` parameter on a reducer allows you to write "sagas," or a single
 reducer that dispatches other reducers.
 
-```JavaScript
+```javascript
 // add(1)
 addReducer('add', (global, dispatch, i) => ({
   x: global.x + i,
@@ -555,7 +557,7 @@ should use `useDispatch` or `this.dispatch`.
 
 `getDispatch` has no parameters.
 
-```JavaScript
+```javascript
 import { getDispatch } from 'reactn';
 
 // Access this.dispatch.reducerName outside of a Component.
@@ -577,7 +579,7 @@ nothing more than return a current snapshot of the global state.
 
 `getGlobal` has no parameters.
 
-```JavaScript
+```javascript
 import { getGlobal } from 'reactn';
 
 // Access this.global.value outside of a Component.
@@ -596,7 +598,7 @@ the return value of `addCallback`.
 
 The only parameter is the callback function itself.
 
-```JavaScript
+```javascript
 import { addCallback, removeCallback, setGlobal } from 'reactn';
 
 function alertCallback(global) {
@@ -624,7 +626,7 @@ including callbacks, property listeners, and reducers.
 
 There are no parameters.
 
-```JavaScript
+```javascript
 import { getGlobal, resetGlobal, setGlobal } from 'reactn';
 
 // Set the value.
@@ -652,7 +654,7 @@ The optional second parameter is a callback.
 
 `setGlobal` with a new global state:
 
-```JavaScript
+```javascript
 import { setGlobal } from 'reactn';
 
 // Set loading to true.
@@ -663,7 +665,7 @@ setGlobal({
 
 `setGlobal` with a new global state and a callback:
 
-```JavaScript
+```javascript
 import { setGlobal } from 'reactn';
 
 // Set loading to true.
@@ -690,7 +692,7 @@ The first parameter is a function for getting global state values.
 The second parameter is a function for setting global state values (similar to
 `dispatch`).
 
-```JavaScript
+```javascript
 import React, { withGlobal } from 'reactn';
 
 // A button that displays the value and, when clicked, increments it.
@@ -727,7 +729,41 @@ export default withGlobal(
     }
   })
 )(MyComponent);
+```
+
+##### withInit
+
+In some cases (such as when using Next.js), you may be unable to run a setup
+script prior to your ReactN components mounting. In order to instantiate your
+global state and reducers prior to mounting, you may use the `withInit` Higher
+Order Component. This HOC will await the setting of your global state before
+mounting the provided Lower Order Component (e.g. `<App />`).
+
+```javascript
+import React, { useDispatch, useGlobal, withInit } from 'reactn';
+
+const INITIAL_REDUCERS = {
+  addOne: ({ count }) => ({
+    count: count + 1,
+  }),
+};
+
+const INITIAL_STATE = {
+  count: 0,
+};
 
+export default withInit(
+  INITIAL_STATE,
+  INITIAL_REDUCERS,
+)(function App() {
+  const addOne = useDispatch('addOne');
+  const [ count ] = useGlobal('count');
+  return (
+    <button onClick={addOne}>
+      Count: {count}
+    </button>
+  );
+});
 ```
 
 ## Support

docs/src/reactn.ts

@@ -1,18 +1,14 @@
-import { addReducers, setGlobal } from 'reactn';
-import { Dispatch, State } from 'reactn/default';
+import { addReducer, setGlobal } from 'reactn';
+import { State } from 'reactn/default';
 
 const INITIAL_STATE: State = {
   color: '#61DAFB',
 };
 
 setGlobal(INITIAL_STATE);
 
-addReducers({
-
-  setColor: (global: State, _dispatch: Dispatch, color: string) => {
-    if (color !== global.color) {
-      return { color };
-    }
-  },
-
+addReducer('setColor', (global, _dispatch, color) => {
+  if (color !== global.color) {
+    return { color };
+  }
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactn",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "author": "Charles Stover <[email protected]>",
   "description": "React, but with built-in global state management.",
   "homepage": "https://github.com/CharlesStover/reactn#readme",

src/add-reducer.ts

@@ -1,5 +1,5 @@
-import { State } from '../default';
-import Reducer from '../types/reducer';
+import { State, Reducers } from '../default';
+import Reducer, { AdditionalReducers } from '../types/reducer';
 import GlobalStateManager from './global-state-manager';
 
 
@@ -8,10 +8,34 @@ type BooleanFunction = () => boolean;
 
 
 
-export default function _addReducer<G extends {} = State>(
-  globalStateManager: GlobalStateManager<G>,
+export default function _addReducer<
+  G extends {} = State,
+  R extends {} = Reducers,
+  ReducerName extends keyof R = keyof R,
+>(
+  globalStateManager: GlobalStateManager<G, R>,
+  name: ReducerName,
+  reducer: R[ReducerName],
+);
+export default function _addReducer<
+  G extends {} = State,
+  R extends {} = Reducers,
+>(
+  globalStateManager: GlobalStateManager<G, R>,
   name: string,
-  reducer: Reducer<G>,
+  reducer: Reducer<G, R & AdditionalReducers<G, R>>,
+);
+export default function _addReducer<
+  G extends {} = State,
+  R extends {} = Reducers,
+  ReducerName extends keyof R = keyof R,
+>(
+  globalStateManager: GlobalStateManager<G, R>,
+  name: ReducerName | string,
+  reducer: R[ReducerName] | Reducer<G, R & AdditionalReducers<G, R>>,
 ): BooleanFunction {
-  return globalStateManager.addReducer(name, reducer);
+  return globalStateManager.addReducer(
+    name as string,
+    reducer as Reducer<G, R>,
+  );
 };

src/add-reducers.ts

@@ -12,9 +12,11 @@ type BooleanFunction = () => boolean;
 export default function _addReducers<
   G extends {} = State,
   R extends {} = Reducers,
+  AR extends AdditionalReducers<G, R> = AdditionalReducers<G, R>,
+  ARR extends AdditionalReducers<G, R & AR> = AdditionalReducers<G, R & AR>,
 >(
   globalStateManager: GlobalStateManager<G, R>,
-  reducers: AdditionalReducers<G, R & any>,
+  reducers: Partial<R> & ARR,
 ): BooleanFunction {
 
   // Amalgamate all the functions to remove these reducers.

src/index.ts

@@ -12,6 +12,7 @@ import ReactNProvider from '../types/provider';
 import Reducer, { AdditionalReducers } from '../types/reducer';
 import { GlobalTuple, StateTuple } from '../types/use-global';
 import WithGlobal, { Getter, Setter } from '../types/with-global';
+import WithInit from '../types/with-init';
 import { ReactNComponent, ReactNPureComponent } from './components';
 import addCallback from './add-callback';
 import addReducer from './add-reducer';
@@ -27,6 +28,7 @@ import setGlobal from './set-global';
 import useDispatch from './use-dispatch';
 import useGlobal from './use-global';
 import withGlobal from './with-global';
+import withInit from './with-init';
 import React = require('react');
 
 
@@ -43,13 +45,17 @@ interface ReactN extends Omit<typeof React, 'Component' | 'default' | 'PureCompo
     callback: Callback<G>,
   ): BooleanFunction;
 
-  addReducer<G extends {} = State>(
+  addReducer<G extends {} = State, R extends {} = Reducers, ReducerName extends keyof R = keyof R>(
+    name: ReducerName,
+    reducer: R[ReducerName],
+  ): BooleanFunction;
+  addReducer<G extends {} = State, R extends {} = Reducers>(
     name: string,
-    reducer: Reducer<G>,
+    reducer: Reducer<G, R & AdditionalReducers<G, R>>,
   ): BooleanFunction;
 
-  addReducers<G extends {} = State, R extends {} = Reducers>(
-    reducers: AdditionalReducers<G, R>,
+  addReducers<G extends {} = State, R extends {} = Reducers, AR extends AdditionalReducers<G, R> = AdditionalReducers<G, R>, ARR extends AdditionalReducers<G, R & AR> = AdditionalReducers<G, R & AR>>(
+    reducers: Partial<R> & ARR,
   ): BooleanFunction;
 
   // This line should not need to exist, since `Component` exists on both the
@@ -106,6 +112,11 @@ interface ReactN extends Omit<typeof React, 'Component' | 'default' | 'PureCompo
     getter?: Getter<G, R, HP, LP>,
     setter?: Setter<G, R, HP, LP>,
   ): WithGlobal<HP, LP>;
+
+  withInit<G extends {} = State, R extends {} = Reducers, P extends {} = {}>(
+    initialGlobal?: NewGlobalState<G> | null,
+    initialReducers?: null | R,
+  ): WithInit<P, G, R>;
 }
 
 declare namespace ReactNTypes {
@@ -166,4 +177,5 @@ export = Object.assign(reactn, React, {
   useDispatch: useDispatch.bind(null, null),
   useGlobal: useGlobal.bind(null, null),
   withGlobal: withGlobal.bind(null, null),
+  withInit,
 }) as ReactN & typeof ReactNTypes;