Realtime database with Redux Toolkit [Typescript]

Realtime database from Firebase is very convenient, because all you need to do is subscribe to a collection and it will listen for all changes, passing to you the updated state. Redux toolkit is another convenient tool with a magic createAsyncThunk that’ll make working with asynchronous code a bliss. How lucky we are? Everything’s been done for us and now we can simply fill the templates. I’d love if everything was that easy. However, createAsyncThunk isn’t designed to work properly with such case as ours and I want to introduce the way how I implement the needed code.

First of all, let’s create a component which will render data:

./app

Basically, this project renders all blogs from the store and creates a new blog when we click an appropriate element. In this example I use faker for creating fake data. You can replace those values with any data.

Next, we’re going to set our store:

./store/index.ts

Nothing new and you should be familiar with everything. I just want to point out that AppState’s function is bringing an easy access to the state with selector. You’ll this in action-creators.ts.

There was nothing so special so far but now we’re going to see that configuration for which we all have gathered here. In the store folder we create following file:

./store/types.ts

In this file I have attempted to simulate createAsyncThunk function and get all its main advantages. According to original function, it should dispatch pending, fulfilled and rejected and a user should be able to handle those dispatches, accessing state they supply. And for this reason, createLoadingActions was implemented as a helper function to create appropriate actions and delegate provided state with a unique prefix. createLoadingActions creates those kinds of actions for manipulating our blogs. Their usage is shown in the following samples:

./store/action-creators

In this example we simply subscribe to the collection in our database and invoke our fetch pending action on init and fetch fulfilled action on success or rejected on fail as it’s shown in addBlog.

db is a simple reference to firestore:

As thus, we need to handle the state changes:

./store/blogSlice

At the end we have a completely ordinary slice, listening to previously created actions (fetchLoadingActions) with only difference that Error is called as payload.

To sum up you can handle unsubscribe and probably create a helper for adding/removing/modifying collection as it happens in addBlog to avoid recoding the same parts. But that’s not an objective of the current article and I’m assured you’ll figure this out. I hope you’ll find this approach useful or it’ll help you coming up with a better one! Thank you for reading!

A rook_ie craving to become a bishop.