How to keep my reducer pure when using Redux Promise Middleware?

Question

I'm using Redux Promise Middleware and my action creator returns an action with a promise.

Now, in the reducer, I receive the resolved promise data and I have to 'provide' the new state. I also have to do something that is not 'pure' with that data, e.g., store it in local storage.

How should I approach this situation and still keep the reducer pure? That data is obtained in middleware and the first time I get it is in reducer.

I know I can handle the promise in my action creator and access the data before dispatching the action but is there another better way?

`redux-observable` / `redux-saga` are middlewares to take care of this. — Balázs Édes, Jun 09 '17 at 15:34
No, Redux Observable and/or Redux Saga won't take care of this. The question is about how to store data in local storage while keeping pure the reducer(s) that use said data. — Patrick Burtchaell, Apr 22 '18 at 14:21

score 3 · Answer 1 · answered Jun 09 '17 at 15:30

3

You can create your own middleware!

You can call it localStorage-middleware for instance and you can dispatch the action before providing your data to the reducer. Your middleware will listen to that action, like dispatch(saveDataToLocalStorage(dataToSave))

answered Jun 09 '17 at 15:30

Ematipico

1,181
1
9
14

I'll try this approach. Thanks. – bobocu Jun 14 '17 at 10:03
Yes, I would recommend this approach as well! Just make sure the middleware follows Redux Promise Middleware in your middleware chain—this ensures the fulfilled action is always dispatched first. – Patrick Burtchaell Apr 22 '18 at 14:22

How to keep my reducer pure when using Redux Promise Middleware?

1 Answers1