Add Redux State Management to a React on Rails Project

[00:00] Rails new add Redux component to React on Rails. Let's see the end of the directory, CD add Redux component to React on Rails. Let's add React on Rails to the gem file, vim gem file. We'll add gem React on Rails with underscores. Save the file and run bundle install.

[00:24] Now, we'll run React on Rails generator, Rails generate React on Rails colon install dash dash Redux. We'll need Foreman installed, gem install Foreman. Next, we'll install all the Ruby and JavaScript libraries added by the generator, bundle and NPM install.

[00:46] Let's take a look at what just got bundled by running the Rails app. We need to run it with the foreman command so that any changes to the JavaScript files are watched by webpack and rebundled, foreman start -f proc file.dev.

[00:59] A local host colon 3,000, you can see the basic new Rails app. The React on Rails generator creates a path, /helloworld. This example is a text label that will mirror what is in the input text box. I'll change stranger to Egghead.

[01:19] Let's look inside the Rails app using RubyMine. We'll navigate to the view file, index.html.erb. I'll add a horizontal rule. Let's add a new React component to the page using the main React on Rails u-helper React component.

[01:37] I'll create the opening ERB tag, React component ("messageapp, close the tag. Note, we have not yet created the message app component. We're going to work backwards from the view.

[01:54] Navigate to the client app bundle's hello world start up registration.jsx. Add message app to the React on Rails register call. These are the components your Rails views can reference. We'll import message app from a sibling file named message app.

[02:13] Let's create the message app component. To save typing and because these top level app files tend to be quite standard, we'll copy the hello world app.jsx file. This file is what we'll map the props from the Rails view to your Redux component.

[02:31] First, let's change hello world store to message store. Then, let's change hello world container to message container. Change the component name from hello world app to message app, and change the export to message app. I'm going to change the component reference from hello world container to message container.

[02:55] This file contains some boiler plate that is used to bind the container component message container to the Redux store. The message container will receive props as defined from the configure store call. Now, the message app referenced by the registration.jsx file is defined.

[03:13] Next, we'll define the message container component. Once again, we'll copy the hello world container component. This type of component is known as a smart component as it talks to the Redux store.

[03:28] Let's change the hello world import to be message. Change the import location to point to the component's message file. Change the name of the action creator's file to message action creators. To keep this example simpler, we're going to comment that out now since we're not going to make this Redux example interactive.

[03:51] Maps state to props converts the state into the value that the component will receive. This way, the component will only get the necessary slice of stored data needed. For the message component, we want the property name text from the state and want to send that to the component prop name text.

[04:11] Since we're not passing any actions, we'll need to pass null in the call to connect. This is a standard smart component, which we put in our containers directory. This file is responsible for setting up the connection of the contained dom component to the Redux store.

[04:28] Let's move on to the message component which will do the rendering. Since the message.jsx file is very simple, let's create that file from scratch.

[04:37] Make a new file in the components directory called message.jsx. Import React from React, const message equals parens props fat arrow parens. As we'll use a notation for implicitly returning a value from the function, create a div tag, message colon {props.text; export default message;.

[05:10] Let's go back to the message container and not how its selector functions maps to state.txt to the props value for text. Let's revisit the message app. We take care of setting up the message container smart component and the message dumb component.

[05:26] Now, it's time to set up the Redux store and the reducer. Let's copy the hello world store.jsx file and name the new file message store.jsx. Note that files that don't return a class or component will start with a lowercase letter. Change the name of the hello world reducer to message reducer. Change the name of the file to message reducer.

[05:50] Note that configure store is a function that takes the Rails props and passes that to the Redux create store call with our message reducer.

[05:59] Next, we need to create the message reducer. Copy the hello world reducer and name the new file message reducer. Normally, we'd import actions. However, we're starting off without actions.

[06:14] We'll delete the line that imports the actions. Delete the handler for the old hello world name update action. Change the result of calling the reducer to text as this is what this reducer is responsible for.

[06:29] The call to combine reducers will take this variable. Rename the variable to message reducer and export it. The reason we don't just export the combined reducers call is so that the debugger can show the message reducer function name as opposed to anonymous function.

[06:49] Yay! We're almost done.

[06:51] Open up the browser and navigate to the hello world path. Message is explained, just the label, but no props. That is because we never passed the props to the call to the view helper. Let's do that. Open up index.html.erb view. We'll add a second name parameter props containing a Ruby object with the key text and a value of Egghead.

[07:15] Let's switch over to the browser and refresh the page. Now Egghead shows. I'll go back in the view and change the value of the prop to time to visit Maui and refresh the web page.