Merge pull request #7 from jaystack/type-enhancements

Type enhancements

Author: hasyee

README.md

@@ -90,12 +90,6 @@ A repatch middleware takes the `store` instance, a `next` function and the previ
 Middleware: Store -> Next -> Reducer -> any
 ```
 
-where
-
-```javascript
-Next: Reducer -> Reducer
-```
-
 Use the `addMiddleware` method to chaining middlewares:
 
 ```javascript

docs/store.md

@@ -2,7 +2,7 @@
 
 The `Store` holds the whole state tree of your application. You need to instantiate it.
 
-## Constructor
+## **`constructor(initialState: State)`**
 
 #### Arguments
 
@@ -22,7 +22,7 @@ const store = new Store({ counter: 0 })
 
 ## Methods
 
-### `getState()`
+### **`getState(): State`**
 
 This method returns the current state of the store.
 
@@ -40,17 +40,17 @@ const state = store.getState()
 console.log(state.counter === 0) // true
 ```
 
-### `dispatch(reducer)`
+### **`dispatch(reducer: Reducer): State`**
 
 Dispatches a reducer.
 
 #### Arguments
 
-1) **reducer** (*ReducerFunction: State -> State*): That reducer will reduce the state of the store. This takes the current state and returns the next state.
+1) **reducer** (*Reducer: State -> State*): That reducer will reduce the state of the store. This takes the current state and returns the next state.
 
 #### Returns
 
-(*ReducerFunction*): The final reducer that is made by applying the middlewares - if they are given. If the store does enhanced with middlewares, the `dispatch` method returns the same reducer that was taken as argument.
+(*State*): The new state after reducing.
 
 #### Example
 
@@ -66,19 +66,19 @@ console.log(result === increment) // true
 
 #### Notes
 
-Middlewares can modify the given reducer, so that is not guaranteed that the `dispatch` returns the original reducer that was taken as argument.
+If you use middlewares, that is not guaranteed that the `dispatch` returns the new state. For example `thunk` middleware modify `dispatch` that it returns the result of delegate function.
 
-### `subscribe(listener)`
+### **`subscribe(listener: Listener): Unsubscribe`**
 
 Adds a state change listener.
 
 #### Arguments
 
-1) **listener** (*ListenerFunction: void -> void*): The listener that will be synchronously run after the state was modified by dispatching a reducer.
+1) **listener** (*Listener: void -> void*): The listener that will be synchronously run after the state was modified by dispatching a reducer.
 
 #### Returns
 
-(*UnsubscribeFunction: void -> void*): The unsubscribe function, that you can use to unsubscribe the given listener.
+(*Unsubscribe: void -> void*): The unsubscribe function, that you can use to unsubscribe the given listener.
 
 #### Example
 
@@ -96,15 +96,15 @@ unsubscribe()
 store.dispatch(increment) // listener won't be fired
 ```
 
-### `addMiddleware(...middlewares)`
+### **`addMiddleware(...middlewares: Middleware[]): Store`**
 
 Enhances the store with the given middleware(s).
 
 Middlewares will be run at dispatching before the store applies the new state of the reducer. The added middlewares are composed by order of addition, so the last added middleware will run first.
 
 #### Arguments
 
-1) **...middlewares** (*MiddlewareFunction: Store -> Next -> Reducer -> any*): Middlewares as variadic arguments. Middleware functions take the `store` instance, a `next` function and the previous `reducer`. The middleware can provide a new reducer via the `next` function.
+1) **...middlewares** (*Middleware: Store -> Next -> Reducer -> any*): Middlewares as variadic arguments. Middleware functions take the `store` instance, a `next` function and the previous `reducer`. The middleware can provide a new reducer via the `next` function.
 
 #### Returns
 
@@ -124,10 +124,4 @@ const store = new Store({ counter: 0 }).addMiddleware(logger)
 
 store.dispatch(state => ({ counter: state.counter + 1 }))
 // logger logs { counter: 0 } { counter: 1 }
-```
-
-## Static members
-
-### `thunk`
-
-The [thunk](thunk.md) middleware.
+```

docs/thunk.md

@@ -2,9 +2,7 @@
 
 Thunk is a repatch middleware to handle async actions. It is very similar to [redux-thunk](https://www.npmjs.com/package/redux-thunk). Thunk middleware allows you to create reducers that returns a function (delegate). The delegate will be fired at dispatching.
 
-## ThunkMiddleware
-
-`State -> Delegate`
+`Thunk: State -> Delegate`
 
 #### Example
 

src/store/index.ts

@@ -1,28 +1,24 @@
 import { Store as IStore, Listener, Unsubscribe, Middleware, Reducer, Dispatch, GetState } from './types';
-import thunk, { ThunkMiddleware } from './middlewares/thunk';
 
 export * from './types';
 export * from './middlewares/thunk';
-export { thunk };
 
-export default class Store<State, R = Reducer<State>> implements IStore<State, R> {
-  static thunk = thunk;
-
-  private state: State;
+export default class Store<S> implements IStore<S> {
+  private state: S;
   private listeners: Listener[] = [];
 
-  constructor(initialState: State) {
+  constructor(initialState: S) {
     this.state = initialState;
   }
 
-  getState: GetState<State> = () => this.state;
+  getState: GetState<S> = () => this.state;
 
-  dispatch: Dispatch<R> = reducer => {
+  dispatch: Dispatch<S> = reducer => {
     if (typeof reducer !== 'function')
       throw new Error('Reducer is not a function: dispatch takes only reducers as functions.');
     this.state = reducer(this.state);
     this.listeners.forEach(listener => listener());
-    return <R>reducer;
+    return this.state;
   };
 
   subscribe = (listener: Listener): Unsubscribe => {
@@ -32,7 +28,7 @@ export default class Store<State, R = Reducer<State>> implements IStore<State, R
     return () => (this.listeners = this.listeners.filter(lis => lis !== listener));
   };
 
-  addMiddleware = <R2>(...middlewares: Middleware<State, R, R2>[]): Store<State, R | R2> => {
+  addMiddleware = (...middlewares: Middleware[]): this => {
     if (middlewares.some(middleware => typeof middleware !== 'function'))
       throw new Error('Middleware is not a function: addMiddleware takes only middlewares as functions.');
     middlewares.forEach(middleware => (this.dispatch = middleware(this)(this.dispatch) as any));

src/store/middlewares/thunk.ts

@@ -1,35 +1,34 @@
-import { Middleware, GetState, Dispatch, Reducer, Store } from '../types';
+import { Middleware, Dispatch, GetState } from '../types';
 
-export interface ThunkMiddleware<State, ExtraArgument>
-  extends Middleware<State, Reducer<State>, Thunk<State, ExtraArgument, any>> {
-  withExtraArgument: <EA>(extraArgument: EA) => ThunkMiddleware<State, EA>;
+export interface Delegate<S, E, R> {
+  (dispatch: Dispatch<S>, getState: GetState<S>, extraArgument: E): R;
 }
 
-export interface Delegate<State, ExtraArgument, Return> {
-  (dispatch: ThunkDispatch<State, ExtraArgument>, getState: GetState<State>, extraArgument: ExtraArgument): Return;
+export interface Thunk<S, E, R> {
+  (state: S): Delegate<S, E, R>;
 }
 
-export interface ThunkDispatch<State, ExtraArgument> extends Dispatch<Reducer<State>> {
-  <Return>(reducer: Thunk<State, ExtraArgument, Return>): Return;
+declare module '../types' {
+  export interface Dispatch<S> {
+    <R, E = any>(thunk: Thunk<S, E, R>): R;
+  }
 }
 
-export interface Thunk<State, ExtraArgument, Return> {
-  (state: State): Delegate<State, ExtraArgument, Return>;
+export interface ThunkMiddleware<E> extends Middleware {
+  withExtraArgument: <E>(extraArgument: E) => ThunkMiddleware<E>;
 }
 
-const thunkFactory = (extraArgument?) => {
-  const thunk = store => next => reducer => {
-    if (typeof reducer !== 'function') throw new Error('Thunk requires reducers as functions');
-    const state = store.getState();
-    const result = reducer(state);
+const thunkFactory = <E>(extraArgument?: E): ThunkMiddleware<E> => {
+  const thunk = (store => next => reducer => {
+    if (typeof reducer !== 'function') throw new Error('Thunk reducer must return a function');
+    const result = reducer(store.getState());
     if (typeof result === 'function') return result(store.dispatch, store.getState, extraArgument);
-    else {
-      next(_ => result);
-      return reducer;
-    }
-  };
-  thunk['withExtraArgument'] = thunkFactory;
+    else return next(_ => result);
+  }) as ThunkMiddleware<E>;
+
+  thunk.withExtraArgument = thunkFactory;
+
   return thunk;
 };
 
-export default thunkFactory() as ThunkMiddleware<any, any>;
+export const thunk = thunkFactory();

src/store/types.ts

@@ -1,13 +1,13 @@
-export interface GetState<State> {
-  (): State;
+export interface GetState<S> {
+  (): S;
 }
 
-export interface Reducer<State> {
-  (state: State): State;
+export interface Reducer<S> {
+  (state: S): S;
 }
 
-export interface Dispatch<Reducer> {
-  (reducer: Reducer): Reducer;
+export interface Dispatch<S> {
+  (reducer: Reducer<S>): S;
 }
 
 export interface Listener {
@@ -18,17 +18,13 @@ export interface Unsubscribe {
   (): void;
 }
 
-export interface Middleware<State, R1, R2> {
-  (store: Store<State, R1>): {
-    (next: Dispatch<R1>): {
-      (reducer: R2): any;
-    };
-  };
+export interface Middleware {
+  <S>(store: Store<S>): (next: Dispatch<S>) => Dispatch<S>;
 }
 
-export interface Store<State, R = Reducer<State>> {
-  getState: GetState<State>;
-  dispatch: Dispatch<R>;
+export interface Store<S> {
+  getState: GetState<S>;
+  dispatch: Dispatch<S>;
   subscribe(listener: Listener): Unsubscribe;
-  addMiddleware<R2>(...middlewares: Middleware<State, R, R2>[]): Store<State, R | R2>;
+  addMiddleware(...middlewares: Middleware[]): this;
 }

src/test/store.spec.ts

@@ -36,10 +36,10 @@ describe('store', () => {
       assert.strictEqual(store.getState(), 2);
     });
 
-    it('dispatch returns the reducer', () => {
+    it('dispatch returns the new state', () => {
       const store = new Store(1);
       const reducer = state => state + 1;
-      assert.strictEqual(store.dispatch(reducer), reducer);
+      assert.strictEqual(store.dispatch(reducer), 2);
     });
   });
 

src/test/thunk.spec.ts

@@ -1,29 +1,25 @@
 import 'mocha';
 import * as assert from 'assert';
-import Store, { thunk, Thunk, Reducer } from '../store';
+import Store, { thunk } from '../store';
 
 process.env.NODE_ENV = 'test';
 
 describe('thunk', () => {
-  it('as Store static member', () => {
-    assert.strictEqual(Store.thunk, thunk);
-  });
-
   it('dispatch invokes the delegate', () => {
-    const store = new Store(1).addMiddleware<Thunk<number, void, any>>(thunk);
+    const store = new Store(1).addMiddleware(thunk);
     assert.strictEqual(store.getState(), 1);
-    store.dispatch((state => (dispatch, getState) => {
-      store.dispatch(state => getState() + 1);
-    }) as Thunk<number, void, void>);
+    store.dispatch(state => (dispatch, getState) => {
+      dispatch(state => getState() + 1);
+    });
     assert.strictEqual(store.getState(), 2);
   });
 
-  it('dispatch returns the delegate', () => {
-    const store = new Store(1).addMiddleware<Thunk<number, void, any>>(thunk);
+  it('dispatch returns the result of delegate', () => {
+    const store = new Store(1).addMiddleware(thunk);
     const expected = 8;
     assert.strictEqual(
       store.dispatch(state => dispatch => {
-        store.dispatch(state => state + 1);
+        dispatch(state => state + 1);
         return expected;
       }),
       expected
@@ -32,9 +28,9 @@ describe('thunk', () => {
 
   it('extra arguments are provided', () => {
     const add = (a, b) => a + b;
-    const store = new Store(1).addMiddleware<Thunk<number, typeof add, any>>(thunk.withExtraArgument(add));
+    const store = new Store(1).addMiddleware(thunk.withExtraArgument(add));
     store.dispatch(state => (dispatch, getState, add) => {
-      store.dispatch(state => add(state, 1));
+      dispatch(state => add(state, 1));
     });
     assert.strictEqual(store.getState(), 2);
   });