React, Flatiron Mod 5 Project, Part 1

Of the 5 modules for Flatiron School (Ruby, Sinatra, Rails, Javascript, and React), I think I have found this one the most difficult to wrap my head around.

I can definitely see the benefits of React. It's approach of focusing on clean user interfaces using components that are aware of state and able to re-render only the parts that are needed is very powerful.

I found myself getting lost when, on top of learning all this stuff for React, they throw in Redux and Thunk as new concepts and code to learn about.

In a lot of ways I feel like I am limping across the finish line as I come to the end of my time with Flatiron.

Here is a link to my project if you are interested.

Important Lessons

Since I struggled so much with Redux and Thunk, I am splitting my blog post in two parts to go over each idea in the hopes that it will sink some of the concepts deeper into my mind. Redux does make more sense to me than Thunk and hopefully I am able to explain it well enough.

Redux

Redux seems to be about taking much of the logic out of the React components and moving it elsewhere so that the components can focus on presenting data and letting the user interact with the app.

Redux moves the application's state out of the components to a central store of data. This makes it so every component that needs access to the store data can get it more easily.

This isn't going to be a tutorial about how to set up Redux. There are plenty of those online. I would recommend the Redux documentation for in depth explanation of setup and ideas. This is more about going over the main concepts of Redux.

With that in mind, if the state is now outside of the components then it needs to exist. Here is the code from my index.js file.

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import rootReducer from "./reducers/rootReducer"
import { composeWithDevTools } from 'redux-devtools-extension'
import './index.css'
import App from './App'
import { BrowserRouter as Router } from 'react-router-dom';



const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))


ReactDOM.render(
  <Router>
    <Provider store={store}>
      <App />
    </Provider>
  </Router>,
  document.getElementById('root')
)

The important parts here are the createStore function, the rootReducer file, and <Provider> tags. My variable store is what is created when the function createStore runs. The rootReducer file takes in my reducer functions which are responsible for returning the next state tree, given the current state tree and an action. More on that later.

The app now knows about the store and how the store gets changed based on actions. What it needs is to make that store available to the components. That's where the <Provider> comes in. By Wrapping the <App /> component in the <Provider> and giving it the store, we give every child component of <App /> the ability to access the store no matter where they fall in the hierarchy of components.

To connect one of my components to the store, I can use something similar to this code.

import { connect } from 'react-redux'

...

const mapStateToprops = (state) => {
    return{
        movie: state.movies,
    }
}
export default connect(mapStateToprops)(MovieCard)

This now adds everything that is in my store under movies as props to my component with the key of movie:. So in this component I can now display the current state. My project, where this code is from, searches an API to return movie data. So in my component I can display things now like {this.props.movie.title}.

Actions & Reducers

That brings us to how we can change the store data. I will save that explanation for part 2 where I can also talk about Thunk and how it works into all of this.

Thanks for reading.