Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

One More Time, Error: Actions must be plain objects. Use custom middleware for async actions #546

Open
4 of 9 tasks
msqaddura opened this issue Nov 1, 2018 · 0 comments

Comments

@msqaddura
Copy link

msqaddura commented Nov 1, 2018

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.12.0
Typescript Version: 3.1.3
Angular Version: latest
@angular-redux/store version: latest
@angular/cli version: (if applicable) latest
OS: Windows 10

Link to repo showing the issus

(optional, but helps a lot)

Expected Behaviour:

dispatching an instance of a class instead of a plain object, without any thunk/async intention.

Actual Behaviour:

Error assuming am using it for async actions, while it is not my purprose.

Stack Trace/Error Message:

Error: Actions must be plain objects. Use custom middleware for async actions

Additional Notes:

Source of issue
https://github.com/reduxjs/redux/blob/master/src/createStore.js#L176

So basically the error is coming from that line of code which actually makes sense. In order to keep the peeps from abusing it (dispatch -> return a promise or observable). However, I instead of writing the pure function that returns an object, am using a class and dispatching a new instance. to gain more strongly typed actions + satisfy my laziness .
my solution now is as so :

//OPTION 1 : global
const plainObjectMiddleWare = _ => next => action => {
  next({ ...action });
};

//OPTION 2 : manual

store.dispatch({... new MyAction(1)}) 

//in both cases the class  would be 
export const MY_ACTION = 'MY_ACTION'; //compatibilitywith previous code
export class MyAction{
   readonly type = MY_ACTION 
   constructor (readonly number){}
 }

Now of course the question is why am asking here instead of of the reduxjs repo itself... well, because it is reduxJAVASCRIPT and it will be pain in the ass to explain them about Typescript and i believe since you here are doing well with Rx & TS you would get my point.

so perhaps you can add the plainObjectMiddleWare, or a decorator/transformer.
or you advice to keep it as is?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant