Debug redux-observable with redux dev-tools
Being just another redux-middleware, we can take advantage of existing tools created by the large redux community. Arguably the most valuable & popular amongst these is the rev-tools extension that allows visibility into the lifecycle of the redux store. https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
Instructor: [00:00] Add the packages redux-observable and RxJs. Let's start the development server. We need the place in our code where the store is configured. In our case, we have this function. Inside here, we can import from redux-observable, combineEpics, and createEpicMiddleware.
[00:24] Just like we had a root reducer here, we're also going to create a root epic. That's going to be the result of calling combineEpics and passing in any number of epics here.
[00:35] An epic in redux-observable is just a function that returns a stream of actions. The simplest one we could ever create would be to say epic1 is equal to a function that returns, and we need to give a stream here.
[00:48] We can create a stream of one element by using the of-creation method from RxJs, and then we can return an object literal that has type set-name and the payload of Sally. Now, we have this epic, we can pass it along to combineEpics. The point here is that you'd be able to have any number of epics here. For now, we'll stick with this one.
[01:11] Now, we have our root epic, but redux-observable is a Redux middleware. We need to create that. We'll say we have an epic middleware. We don't pass any arguments to it. To register this middleware, the second argument to createStore can be a call to applyMiddleware. It comes from the redux package. We can just pass in our epic middleware.
[01:39] Once the store has been created, we need to initialize this root epic. The way we do that is, instead of returning the store immediately, we can just save this to a variable, then we call epic-middleware.run and we pass in our root epic. Finally, we return the store.
[02:00] To recap, we already had a Redux store and our root reducer. We brought in combineEpics and createEpicMiddleware from redux-observable. We created a simple epic that just produces a stream of one single action. We created a root epic by combining any number of epics together. As it happens, we only had the one.
[02:26] We created a separate epic middleware so that we could use the applyMiddleware function from Redux. That registers the redux-observable middleware. Then just before we return the store, we call epic-middleware.run and pass in our root epic. This will initialize any of the epics that we have registered. Finally, we return the store.
[02:54] To see how this action ties into Redux, let's go back to our reducer, where we have this default value of name Shane. We'll add a switch statement and we'll switch on the type. If we see setName, then we'll return a spread of the previous state, and then the name being the action.payload. The default case is just to return the state. We no longer need that.
[03:22] Now, what we would expect to see is the Redux store to be initialized with this value, but since this will be called immediately and it will produce this action into the Redux store, we would expect to see this match and the name to be set to something else.
[03:42] If we go to our app component and just console.log(this.props name), you see that we actually get Sally. Just to make this clearer, if we were to add a delay here -- like, let's say, two-second delay -- head back to the browser, you can see that it first logged Shane and, two seconds later, logged Sally. If we refresh again, you see Shane and Sally.