ReduxRails

Easily setup React and Redux in Rails -v 5.1. Create re-usable project files and folders for use throughout your project or outside of the current one. Start from scratch or add to an existing project. Redux is setup during the install generator, but not required and still functions correctly. With easy presentational component and container generators you can add to any project and use on any other projects with or without Rails.

Table of contents

• ReduxRails
• Highlights
• Install Generator
  • Created folders/files
  • Component folder
  • Container folder
• Pack Generator
  • Created folders/files
  • Component folder
  • Container folder
• Component Generator
  • Created folder/files
• Container Generator
  • Created folder/files
• Installation
• Usage
  • Install Generator
  • Pack Generator
  • Component Generator
  • Container Generator
• Contributing
• Helpful Links
• License ### Highlights
• install, pack, component and container generator
• creates a pack tag for rails g redux_rails:install #{your_app_name} command and installs the necessary lines to manifest.json. Allowing you to have several seperate React apps inside of a single rails project.
• pack generator creates a new React app you can use anywhere in your project. It includes everything from the redux_rails:install command without re-installing the javascript dependencies.
• install component and container folders in any folder location in your pipeline from the command line with the necessary import/export/require lines.
• react-router-dom
• redux-devtools-extension - "https://github.com/zalmoxisus/redux-devtools-extension" ###### Back to top ### Install Generator
• Installs the following dependencies react-redux redux redux-devtools-extension react-router-dom react-router-redux history
• Installs a new #your_app_name.jsx file in app/javascript/packs with additional Redux setup options commented out for modifications. ###### if you leave #your_app_name blank. file, component and container names will default to 'app'
• Links it to public/packs/manifest.json #### Created folders/files
• app/javascript/src/#your_app_name,
• app/javascript/src/#your_app_name/reducer.js, for your combineReducer

Component folder

• app/javascript/src/#your_app_name/components,
• app/javascript/src/#your_app_name/components/app,
• app/javascript/src/#your_app_name/components/app/app.js,
• app/javascript/src/#your_app_name/components/app/app.scss

Container folder

• app/javascript/src/#your_app_name/containers,
• app/javascript/src/#your_app_name/containers/app,
• app/javascript/src/#your_app_name/containers/app/app.js,
• app/javascript/src/#your_app_name/containers/app/action.js,
• app/javascript/src/#your_app_name/containers/app/actionTypes.js,
• app/javascript/src/#your_app_name/containers/app/constants.js,
• app/javascript/src/#your_app_name/containers/app/appReducer.js ###### Back to top ### Pack Generator
• Installs a new #your_app_name.jsx file in app/javascript/packs with additional Redux setup options commented out for modifications. ###### if you leave #your_app_name blank. file, component and container names will default to 'app'
• Links it to public/packs/manifest.json #### Created folders/files
• app/javascript/src/#your_app_name,
• app/javascript/src/#your_app_name/reducer.js, for your combineReducer

Component folder

• app/javascript/src/#your_app_name/components,
• app/javascript/src/#your_app_name/components/app,
• app/javascript/src/#your_app_name/components/app/app.js,
• app/javascript/src/#your_app_name/components/app/app.scss

Container folder

• app/javascript/src/#your_app_name/containers,
• app/javascript/src/#your_app_name/containers/app,
• app/javascript/src/#your_app_name/containers/app/app.js,
• app/javascript/src/#your_app_name/containers/app/action.js,
• app/javascript/src/#your_app_name/containers/app/actionTypes.js,
• app/javascript/src/#your_app_name/containers/app/constants.js,
• app/javascript/src/#your_app_name/containers/app/appReducer.js ###### Back to top ### Component Generator #### Created folder/files
• app/javascript/src/#your_app_name/components/app/#your_component_name,
• app/javascript/src/#your_app_name/components/app/#your_component_name/#your_component_name.js,
• app/javascript/src/#your_app_name/components/app/#your_component_name/#your_component_name.scss ###### Back to top ### Container Generator #### Created folder/files
• app/javascript/src/#your_app_name/containers/#your_container_name,
• app/javascript/src/#your_app_name/containers/#your_container_name/#your_container_name.js,
• app/javascript/src/#your_app_name/containers/#your_container_name/action.js,
• app/javascript/src/#your_app_name/containers/#your_container_name/actionTypes.js,
• app/javascript/src/#your_app_name/containers/#your_container_name/constants.js,
• app/javascript/src/#your_app_name/containers/#your_container_name/#your_container_nameReducer.js
• each generated container reducer will be imported into #your_app_name root reducer at app/javascript/src/#your_app_name/reducer.js and included in the combineReducer ###### Back to top ## Installation

Create a new Rails project with webpack option

$ rails new app_name --webpack=react

Then navigate into your new project:

$ cd app_name

Add this line to your application's Gemfile:

gem 'redux_rails'

And then execute:

$ bundle

I also recommend running bundle update to make sure you have the most current version of redux_rails

Or install it yourself as:

$ gem install redux_rails

To allow javascript_pack_tag to load assets from webpack-dev-server navigate to config/environments/development.rb and add:

config.x.webpacker[:dev_server_host] = "http://127.0.0.1:8080"

To create the packs/manifest.json run:

$ ./bin/webpack-dev-server --host 127.0.0.1

At this point, Rails has created a javascript friendly app for you. To render the sample react component rails creates for you follow these steps. Or to start using the redux_rails gem skip down to Usage.

1. Open a new terminal tab/window. Make sure you are in the correct directory and create a controller and a view:

   $ rails generate controller Pages index

• This creates a Pages controller with an index method in it. A view template at app/views/pages/index.html.erb.
• Navigate to this file and replace the contents with:

<%= javascript_pack_tag 'hello_react' %>

1. Start the Rails server in a terminal window:

   $ Rails server

2. and in a second server window:

   $ ./bin/webpack-dev-server --host 127.0.0.1

I use and recommend installing Forego to open a Rails server and launch webpack with a single command line entry. Link for installation in the Helpful Links section below. Add a Procfile in your projects root folder with these two lines in the Procfile:

rails: bin/rails s
webpack: ./bin/webpack-dev-server --host 127.0.0.1

and the command to start Forego

$ forego start

1. Navigate to http://localhost:3000/pages/index and you should see Hello React! ###### Back to top ## Usage

Install generator

only run this once! If you wish to create additional pack files run rails generate pack #{pack_name}

Once your rails app is setup with the webpack=react option and the redux-rails gem is installed and your config/environments/development.rb is updated execute:

if you leave #your_app_name blank file, component and container names will default to 'app'

$ rails generate redux_rails:install #{your_app_name}

This will install the following files:

src section

• app/javascript/src
• app/javascript/src/#{your_app_name}/reducer.js "this is for your combineReducer" ###### components section
• app/javascript/src/#{your_app_name}/components
• app/javascript/src/#{your_app_name}/components/#{your_app_name}
• app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.js
• app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.scss ###### containers section
• app/javascript/src/#{your_app_name}/containers
• app/javascript/src/#{your_app_name}/containers/#{your_app_name}
• app/javascript/src/#{your_app_name}/containers/#{your_app_name}/#{your_app_name}.js
• app/javascript/src/#{your_app_name}/containers/#{your_app_name}/action.js
• app/javascript/src/#{your_app_name}/containers/#{your_app_name}/actionTypes.js
• app/javascript/src/#{your_app_name}/containers/#{your_app_name}/constants.js
• app/javascript/src/#{your_app_name}/containers/#{your_app_name}/#{your_app_name}Reducer.js

and adds and installs these dependencies to your package.json file:

react-redux redux redux-devtools-extension react-router-dom react-router-redux history

Once the Install Generator is finished:

1. add the following pack_tags to the file you want the react component to be rendered in <%= javascript_pack_tag '#{your_app_name}' %> <%= stylesheet_pack_tag '#{your_app_name}' %>

2. Restart your servers or open two new ones with the commands above and navigate to the page in your browser and you should see:

   #{your_app_name} component!
   find me in find me in app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.js
   

   Back to top

   Pack generator

   The Pack generator takes a single name argument

   if you leave #your_app_name blank file, component and container names will default to 'app'

   To create a new Pack file run:

   $ rails generate pack #your_app_name

This will generate a new React app inside of the app/javascript/src folder. Including a new pack/#{your_app_name}.jsx file and links to public/packs/manifest.json. Includes the following folder and files:

src section

• app/javascript/src
• app/javascript/src/#{your_app_name}/reducer.js "this is for your combineReducer" ###### components section
• app/javascript/src/#{your_app_name}/components
• app/javascript/src/#{your_app_name}/components/#{your_app_name}
• app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.js
• app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.scss ###### containers section
• app/javascript/src/#{your_app_name}/containers
• app/javascript/src/#{your_app_name}/containers/#{your_app_name}
• app/javascript/src/#{your_app_name}/containers/#{your_app_name}/#{your_app_name}.js
• app/javascript/src/#{your_app_name}/containers/#{your_app_name}/action.js
• app/javascript/src/#{your_app_name}/containers/#{your_app_name}/actionTypes.js
• app/javascript/src/#{your_app_name}/containers/#{your_app_name}/constants.js
• app/javascript/src/#{your_app_name}/containers/#{your_app_name}/#{your_app_name}Reducer.js

Once the Pack Generator is finished:

1. add the following pack_tags to the file you want the react component to be rendered in <%= javascript_pack_tag '#{your_app_name}' %> <%= stylesheet_pack_tag '#{your_app_name}' %>
2. Restart your servers or open two new ones with the commands above and navigate to the page in your browser and you should see: #{your_app_name} component! find me in find me in app/javascript/src/#{your_app_name}/components/#{your_app_name}/#{your_app_name}.js ###### Back to top ### Component generator The Component generator takes two arguments (the new Component name and the desired install location) ###### if you leave #your_app_name or #your_component_name blank. file, component and container names will default to 'app' > you can install a component folder anywhere you would like by typing out the full path during the install command. rails g component your_awesome_component_name your_app/some_other_folder/some_folder

To create a new component run:

$ rails generate component  #{your_component_name} #{your_app_name}

This will generate a new folder inside of your components folder with the following files:

• app/javascript/src/#{your_app_name}/components/#{your_component_name}
• app/javascript/src/#{your_app_name}/components/#{your_component_name}/#{your_component_name}.js
• app/javascript/src/#{your_app_name}/components/#{your_component_name}/#{your_component_name}.scss ###### Back to top ### Container generator The Container generator takes two arguments (the new Container name and the desired install location) ###### if you leave #your_app_name or #your_container_name blank. file, component and container names will default to 'app' > you can install a container folder anywhere you would like by typing out the full path during the install command. rails g container your_awesome_container_name your_app/some_other_folder/some_folder. However, using this with the container generator you will have to manually add your folders location to the rootReducer you wish to use for this new container.

To create a new container run:

$ rails generate container  #{your_container_name} #{your_app_name}

This will generate a new folder inside of your containers folder with the following files:

• app/javascript/src/#{your_app_name}/containers/#{your_container_name}
• app/javascript/src/#{your_app_name}/containers/#{your_container_name}/#{your_container_name}.js
• app/javascript/src/#{your_app_name}/containers/#{your_container_name}/action.js
• app/javascript/src/#{your_app_name}/containers/#{your_container_name}/actionTypes.js
• app/javascript/src/#{your_app_name}/containers/#{your_container_name}/constants.js
• app/javascript/src/#{your_app_name}/containers/#{your_container_name}/#{your_container_name}Reducer.js ###### Back to top ## Contributing Any feature requests, comments or suggestions are very welcomed and encouraged. I would like to continue to develop this gem and would appreciate any feedback from the Rails or React community about where they would like to see this go in the future. Bug reports and pull requests are always welcome on GitHub at https://github.com/Luke-Popwell/redux_rails. ###### Back to top

Helpful Links

• Rails 5.1
• react
• redux
• react-router-dom
• webpack v2
• redux-devtools-extension
• forego (foreman built in go)
• article by Jack Hsu about redux file structuring ###### Back to top

License

The gem is available as open source under the terms of the MIT License.

Back to top