Error on redux.dispatch

[danieldaeschle]

This is a...

• feature request
• bug report
• usage question

What toolchain are you using for transpilation/bundling?

• @ angular/cli
• Custom @ ngTools/webpack
• Raw ngc
• SystemJS
• Rollup
• Other

Environment

NodeJS Version: 8.11.1
Typescript Version: 2.4.2
Angular Version: 5.0.0
@angular-redux/store version: 7.1.1
@angular/cli version: 1.7.4
OS: Ubuntu 16.04

Expected Behaviour:

It should work 😆

Actual Behaviour:

This message on compiling:

ERROR in node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(10,31): error TS2420: Class 'NgRedux<RootState>' incorrectly implements interface 'ObservableStore<RootState>'.
  Types of property 'dispatch' are incompatible.
    Type 'Dispatch<RootState>' is not assignable to type 'Dispatch<AnyAction>'.
      Type 'RootState' is not assignable to type 'AnyAction'.
node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(37,33): error TS2344: Type 'RootState' does not satisfy the constraint 'Action<any>'.
node_modules/@angular-redux/store/lib/src/components/root-store.d.ts(18,24): error TS2344: Type 'RootState' does not satisfy the constraint 'Action<any>'.
src/app/actions/note.ts(15,31): error TS2345: Argument of type '{ type: string; payload: Note; }' is not assignable to parameter of type 'IAppState'.
  Object literal may only specify known properties, and 'type' does not exist in type 'IAppState'.
src/app/actions/note.ts(19,31): error TS2345: Argument of type '{ type: string; payload: Note; }' is not assignable to parameter of type 'IAppState'.
  Object literal may only specify known properties, and 'type' does not exist in type 'IAppState'.
src/app/components/notedesk/notedesk.component.ts(2,32): error TS2307: Cannot find module '../shared/article.service'.
src/app/components/notedesk/notedesk.component.ts(3,25): error TS2307: Cannot find module '../shared/models/article'.

Additional Notes:

Message transalted from german:

The argument of type "{ type: string; payload: Note; }" cannot be assigned to the "IAppState" type parameter.
  The object literal can only specify known properties, and "type" is not available in the "IAppState" type.

[danieldaeschle]

https://github.com/noteslab/web/tree/redux

[danieldaeschle]

Updated to newest angular - still same error

[depe6]

Same thing for me :(

[fredrik-macrobond]

Are you all using Redux 4.0?

[danieldaeschle]

Newest Version. Should be 4.0

[konstantin-roehm]

Same problem here. Only downgrade of Redux to v3.7.2 fixes the issue.

[LandSprutte]

Downgraded to Redux v3.7.2 from Redux 4. I'm using "@angular-redux/store": "7", but still had the same problem. Though when I combined my reducers, I had to specify the IAppState in order for it to work.

export const rootReducer = combineReducers({
common: commonReducer,
});

[ethanmick]

Same problem here.

[christikaes]

PR to fix this issue: #522

In the mean time I've been just updating the respective .d.ts with dispatch: Dispatch<AnyAction>

[akashseth31]

Working the first time on Redux with angular and facing the same issue. Any help?

[danieldaeschle]

@akashseth31 it is a bug

[kyyash]

Is this fixed ?

[danieldaeschle]

PR isn't merged yet.

[kyyash]

Any ETA or any workaround ? Please advise.

[danieldaeschle]

Use ngrx/store

[kyyash]

i want to use it in conjunction with @angular-redux/form.

[danieldaeschle]

Then you have to wait for the fix or downgrade redux to version v3.7.2 which has already been said in this issue.

[kyyash]

if we use angular-redux/store and angular-redux/form, how to we downgrade redux alone when using npm from angular cli ?

[kthomas182]

@kyyash My package.json looks like this.

"@angular-redux/form": "^6.6.0", "@angular-redux/router": "^6.3.1", "@angular-redux/store": "^6.5.7", "redux": "^3.7.2",

[zinderud]

also add
"@types/redux": "3.6.0",

[TyGuy]

@danieldaeschle looks like this has been fixed in #527 .

(EDIT the earlier thing I had said about installing via github did not actually work. Think these ones do though...)

It's not released as 9.0.0 yet, but depending on how bold you are feeling, you could do one of 2 things for workaround:

First Option

Fork, clone, install, pack tarball, push to your github repo, and then npm install tarball from there.

• fork repo
• do this:

git clone https://github.com/<you>/store.git
cd store
npm install
npm pack
mkdir dist
mv angular-redux-store-9.0.0.tgz dist
# add the tarball to .gitignore, because otherwise ignored
echo "\!dist/*.tgz" >> .gitignore
git add -A
git commit -nm "add 9.0.0 tarball"
git push

• then, find the link to the raw .tgz and npm install with it

# from your project repo:
npm install https://github.com/<you>/store/blob/<commit>/dist/angular-redux-store-9.0.0.tgz\?raw\=true --save

Second Option

Trust a complete stranger, and use their tarball (noting that they are not a package manager, and could move or remove this at any point).

npm install https://github.com/TyGuy/store/blob/8d34c3bf9aa4d6018d16f0f961620ec85571ea5d/dist/angular-redux-store-9.0.0.tgz\?raw\=true --save

[SethDavenport]

Redux 4 support is included in @angular-redux/store@9

[Riccardo-Andreatta]

I still have this same issue when upgrading my project from Angular 6 to Angular 7. The only difference is that it is complaining because of the incorrect implementation:

ERROR in node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(10,31): error TS2420: Class 'NgRedux<RootState>' incorrectly implements interface 'ObservableStore<RootState>'.
  Property '[Symbol.observable]' is missing in type 'NgRedux<RootState>' but required in type 'ObservableStore<RootState>'.

I have the current packages installed:

        "@angular-redux/store": "^9.0.0",
        ...
        "@angular/core": "~7.2.15",
        ...
        "redux": "^4.0.1",
        "redux-devtools-extension": "^2.13.8",
        ...

What am I missing?