It starts like this — a developer has two or more components in different parts of the UI and struggling to organize a communication channel between them. That’s the exact problem that Redux is great at solving, right? Well, it depends…
What if you’re app is using a Firebase or GraphQL client (Relay Modern), that already handling data management for you? All you have to do in this case is just to fetch new data from the server and render it. In respond to user actions, you just send user input back to the Firebase or GraphQL backend triggering the next application data flow cycle — life is nice and easy!
Example: How to display a login dialog and do login?
There are a few places in the app, where you need to initiate an action that displays Login Dialog to the user. For example,
[Sign In] button in the toolbar being one of those,
[Continue] button in the comment box is another, an Ajax response containing
401/403 error codes etc.
For that, we can create a custom class (
src/auth.js) with a simple API:
The implementation is pretty simple as well, but before digging into that, let’s see how to use that API.
In the toolbar component you have
[Sign In] button that needs to open a login dialog when clicked. You just add
onClick event handler that will call
auth.showSignInDialog(). In case with React.js, it would look something like this:
Next. You can place the login dialog itself into the he top-level component:
Inside the sign in dialog you would call
auth.signIn() and either display an error message or close the dialog based on the response:
And finally, you can subscribe to any changes in the authentication state and pass
user object to your app by using passing a callback to
auth.onAuthStateChange(user => ... ).
Now, let’s see how the
src/auth.js file looks like. If you’re using Firebase, it would look as simple as:
If you’re using Relay (like me), there is no much benefits in integrating Redux as you can use Relay Modern for managing local state as well. It’s a bit more complex than Redux, but on the other hand, there is no much places where you actually need to manage client state by hand.
Always start by thinking how a vanilla JS solution looks like before integrating a 3rd party library. The more libraries you have, the harder it may become to maintain and develop your app, especially when you onboard new members to your dev team. In case with client-stage management, a few lines of custom JS may solve the trick. If not, my next option would be Flux. If you need to manage most of the client state manually then I would consider using Redux. If you’re using Relay Modern, you can manage client state by using existing API provided by Relay.
Want to ship web apps faster? Check out the following boilerplate projects:
- React Starter Kit (RSK) for isomorphic web apps
- React Starter Kit for Firebase apps, aka React Firebase Starter (NEW!)
- Node.js API Starter Kit for building GraphQL API and API gateways
I just created a Telegram chat room where you can ask questions and get support — @ReactStarter. We’ll be glad to meet your there! Cheers.