New Netguru Gem Will Help You Integrate React and Redux with Rails
I’ve been involved in the development of the react_webpack_rails gem, which provides simple and lightweight integration of Rails, React and Weback.
This gem allows one to build rich user interfaces with a modern JavaScript stack on top of Rails applications. You can find more info about react_webpack_rails in this github repo.
There are many libraries to help you manage data flow and the state of your client-side app. But Redux, with its idea of keeping all data in a single store, is becoming more popular than others. This is why, in my work, I wanted to focus on adding Redux support to the gem. Recently, we published rwr-redux - an integration plugin for the main gem.
Why Should You Use This Gem?
Helpers provided by rwr-redux let you use Redux state containers in different parts of Rails apps/views. You can add multiple interactive components to one page and mix them with static parts. Components can access the same store and have a synced state; also the initial state can be passed to the store, directly from the Rails controller.
Key Features
- mix and match components within Rails view
- pass the initial state to the store directly from the controller
- react-router-redux support
- server-side rendering support
How Does It Work?
react_webpack_rails comes with a generator: to add Redux integration, you simply have to add the --redux option to the installation command.
If you have react_webpack_rails already installed, run:
Now you can register your store and containers using methods implemented in the rwr-redux plugin. Store and all components have to be imported and registered in an entry point for the Webpack bundle: react/index.js.
The imported store has to be a function which accepts the initial state as an argument and returns a redux store object. With this, you will be able to pass initial data from the controller to store.
Containers need to subscribe to the defined store, so they need to have access to it. The Redux library recommends using the <Provider> component. This will be handled by the rwr-redux. Plugin, which makes sure that all container components have store available.
To render defined containers - use rails helpers provided by the gem. You have to initialise redux_store and pass data from the controller before you use redux_container helpers.
Closing Notes
I hope our solution will help you use React and Redux in Ruby on Rails applications and make writing JavaScript more fun.
Any and all contributions are welcome! Let us know if you have any ideas for improving react_webpack_rails. Feel free to share this post with your fellow coders if you like what we’ve done :)
