TypeScript Error in Middleware about redux-thunk HOT 37 CLOSED

not sure if u r into ng2, but if u r:
Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/Angular-kitchen-sink
Regards,

Sean

from redux-thunk.

I think the original issue can be resolved with improved typings based on reduxjs/redux#2563 which hopefully lands soon.

from redux-thunk.

Well, I think that's a problem. Store does not belongs to redux-thunk, so we should not export and require user to import Store from redux-thunk.

Think about it this way: If redux and redux-thunk are written in TS to begin with, what should have happened? It is an augmentation of a method and should be remain as so.

My two cents, 🌷

from redux-thunk.

I can understand what is your confusion.

If it is written in typescript, you would do module augmentation. And the Store is still imported from redux instead of redux-thunk.

If it follows your implementation, then other packages which augment Dispatch would need to do the same thing. If user wants to use both redux-thunk and redux-promise, where should he/she gets the Store from?

from redux-thunk.

From whichever is first in the middleware chain.

IMO is not a proper picture. Consider these:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import prom from 'redux-promise';
import rootReducer from './reducers';
import { Store } from '???'

// Note: this API requires redux@>=3.1.0
const store: Store = createStore(
  rootReducer,
  applyMiddleware(thunk, prom)
);

const store2: Store = createStore(
  rootReducer,
  applyMiddleware(prom, thunk)
);

Where should the Store come from? the order of the middleware should have nothing to do with where you get the Store from. That's why it is an augmentation.

from redux-thunk.

I think something is missing here. You do need to augment the Dispatch<S> from redux so that you can call store.dispatch() with thunk.

from redux-thunk.

@unional Yeah, I didn't really explain this case. You can see in my PR that the Store needs to be imported from redux-thunk as well in order for this to work:

import thunk, { Dispatch, ThunkAction, Store } from '../index.d.ts';

declare const store: Store<{foo: string}>;

store.dispatch((dispatch, getState, extraArg) => {
  console.log(extraArg);
});

This is of course a very synthetic example. In a real application you would probably have something like a configureStore function that would return an instance of the Store by redux-thunk, e.g.:

import {applyMiddleware, createStore} from 'redux';
import thunk, {Store} from 'redux-thunk';
import rootReducer, {IAppState} from './rootReducer';

export default function configureStore(initialState: IAppState): Store<IAppState> {
  // You could also configure devtools here and compose with middleware enhancer.
  return createStore(rootReducer, initialState, applyMiddleware(thunk));
}

This instance would then be able to dispatch thunks.

from redux-thunk.

@unional, maybe I'm misunderstanding something, but let me try to give you a different perspective.

The Store created by createStore in the above example is created by the enhancer returned by applyMiddleWare, which takes the Store instance from the original createStore and replaces the dispatch method with the composed version of all supplied middlewares. Since thunk is the first middleware in the chain, Store.dispatch is in fact not the base implementation by redux but the one by redux-thunk. This is expressed by

export interface Store<S> extends ReduxStore<S> {
  dispatch: Dispatch<S>;
}

in my PR and consequently the interface has to be imported from redux-thunk and used as the return type of configureStore if this is what configureStore is doing internally.

from redux-thunk.

If it follows your implementation, then other packages which augment Dispatch would need to do the same thing. If user wants to use both redux-thunk and redux-promise, where should he/she gets the Store from?

From whichever is first in the middleware chain. After all the signature of this dispatch matches the one that applyMiddleWare assigns to the Store, doesn't it?

from redux-thunk.

I see your point. But how can you write a middleware with augmentation then and solve this issue?

from redux-thunk.

I am using the latest ts and still same issue of:

Error:(13, 29) TS2345:Argument of type '(dispatch: any) => void' is not assignable to parameter of type 'Action'.
  Property 'type' is missing in type '(dispatch: any) => void'.

as I am dispatching a thunk

any ideas?

from redux-thunk.

I see your point. But how can you write a middleware with augmentation then and solve this issue?

With module augmentation (as it is right now), you will get the Store from redux.

from redux-thunk.

@born2net I think you did not have the typings loaded. It is not distributed in 2.1
You need to get it from github somehow, or use typings for this purpose.

from redux-thunk.

you have a link to the latest / proper definition file I should use?

from redux-thunk.

https://github.com/gaearon/redux-thunk/blob/master/index.d.ts

from redux-thunk.

tx!!!!!

from redux-thunk.

unfortunately overriding still results with same error:

Error:(13, 29) TS2345:Argument of type '(dispatch: any) => void' is not assignable to parameter of type 'Action'.
  Property 'type' is missing in type '(dispatch: any) => void'.

from redux-thunk.

Can you give a sample of how are you using it?

from redux-thunk.

sure...

export class MyComp {
  constructor(private store: NgRedux<any>) {
    this.store.dispatch(this.act('222'));
  }

  private act = (i_value) => {
    return (dispatch) => {
      setTimeout(() => {
        dispatch({type: '555', payload: i_value})
      }, 500)
    }
  }
}

from redux-thunk.

How do you get load the typings into your project? Are you using typings?

from redux-thunk.

FYI if I put :any it fixes it...

 private act = (i_value) :any

from redux-thunk.

I did not install any typings and just using my global typings.d.ts (which works great for all my other typings stuff) and pasted your code in... is that wrong?

from redux-thunk.

even after installing, commenting out and putting updated one, same issue

// import * as Redux from "redux";
// import { Middleware } from "redux";

// export as namespace ReduxThunk;
//
// declare const thunk: Middleware & {
// 	withExtraArgument(extraArgument: any): Middleware;
// };
// export default thunk;
//
// declare module 'redux' {
// 	export type ThunkAction<R, S, E> = (dispatch: Dispatch<S>, getState: () => S, extraArgument: E) => R;
//
// 	export interface Dispatch<S> {
// 		<R, E>(asyncAction: ThunkAction<R, S, E>): R;
// 	}
// }



import {Middleware, Dispatch} from "redux";
export type ThunkAction<R, S, E> = (dispatch: Dispatch<S>, getState: () => S,
                                    extraArgument: E) => R;
declare module "redux" {
  export interface Dispatch<S> {
    <R, E>(asyncAction: ThunkAction<R, S, E>): R;
  }
}
declare const thunk: Middleware & {
  withExtraArgument(extraArgument: any): Middleware;
};
export default thunk;

from redux-thunk.

Nope, that most likely would not work. Your typings.d.ts is probably a global script file while what's in there is a module file, you can wrap this in declare module redux-thunk { ... } or use `typings to do that for you.

from redux-thunk.

ok ya tried other way (see prev msg) ... same :/

from redux-thunk.

typings install github:gaearon/redux-thunk -S

Then in your tsconfig.json include typings/index.d.ts in the files section.

from redux-thunk.

ok I will be back in one hour and will try it ASAP thanks again for the support

from redux-thunk.

tried to install and got:

typings WARN badlocation "github:gaearon/redux-thunk" is mutable and may change, consider specifying a commit hash
typings ERR! message Unable to resolve "github:gaearon/redux-thunk"
typings ERR! caused by https://raw.githubusercontent.com/gaearon/redux-thunk/master/typings.json responded with 404, expected it to equal 200
typings ERR!
typings ERR! cwd C:\msweb\msbarcode
typings ERR! system Windows_NT 10.0.14393
typings ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\root\\AppData\\Roaming\\npm\\node_modules\\typings\\dist\\bin.js" "install" "github:gaearon/redux-thunk" "-SD"
typings ERR! node -v v6.5.0
typings ERR! typings -v 2.0.0
typings ERR!
typings ERR! If you need help, you may report this error at:
typings ERR!   <https://github.com/typings/typings/issues>

from redux-thunk.

Forgot that this repo doesn't have typings.json.
Do this: typings install -S redux-thunk=github:gaearon/redux-thunk/index.d.ts

from redux-thunk.

still didn't do it

from redux-thunk.

Ar, its webstorm. Try to see if it compiles ok or not. It should be. At this point, it is webstorm issue.

from redux-thunk.

I understand... I appreciate the time...
regards

from redux-thunk.

@unional @born2net Same Issue! Have tried everything. Please help

from redux-thunk.

param please follow my setup: https://github.com/born2net/Angular-kitchen-sink

from redux-thunk.

Released v2.2.0 with TypeScript definitions included.

from redux-thunk.

I would expect that Thunk would not overwrite the Redux API without also being backwards compatible. However, this is not the case. Instead, here's a workaround for Middleware type incompatibility found to be working in [email protected].

Fair warning: There's a possibility this is not intended behavior for the TypeScript compiler.

import * as Redux from "redux";
import * as ReduxThunk from "redux-thunk";

const middleware: Redux.Middleware =
  (api: Redux.MiddlewareAPI<void>) => (next: Redux.Dispatch<void>) => <A extends Action>(action: A) => {
    return next(action);
  };

@JackSkylark figured this one out.

from redux-thunk.

Hello! I worked with @rodolfo2488 on a fix for this. We believe that this pull request would fix the issue.

from redux-thunk.