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 myproject 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 Reduxdocumentation 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 myindex.js file.

importReactfrom'react'importReactDOMfrom'react-dom'import{createStore,applyMiddleware}from'redux'import{Provider}from'react-redux'importthunkfrom'redux-thunk'importrootReducerfrom"./reducers/rootReducer"import{composeWithDevTools}from'redux-devtools-extension'import'./index.css'importAppfrom'./App'import{BrowserRouterasRouter}from'react-router-dom';conststore=createStore(rootReducer,composeWithDevTools(applyMiddleware(thunk)))ReactDOM.render(<Router><Providerstore={store}><App/></Provider></Router>,document.getElementById('root'))

The important parts here are thecreateStore function, therootReducer file, and<Provider> tags. My variablestore is what is created when the functioncreateStore runs. TherootReducer 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 thestore, 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'...constmapStateToprops=(state)=>{return{movie:state.movies,}}exportdefaultconnect(mapStateToprops)(MovieCard)

This now adds everything that is in my store undermovies as props to my component with the key ofmovie:. 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.