React & Redux Tips

React

It's been an exciting last few weeks cramming my brain with all the wonderful things you can do with React (not to mention the mind-boggling work flow using Redux). I wanted to write a quick helpful article with just a few tidbits of useful info.

Container VS Presentational Components

As I'm sure all you React pros are aware of the power of components. Whether they are full fledged class components with state, multiple methods, and tons of logic or just a simple functional component that simply returns an HTML element, components are what React is all about. While there are new/other ways of designing a React app (hooks seem pretty cool to me), for the project at Flatiron School we need to create container components and presentational (or stateless) components. It's kind of cool thinking about the design of our app this way. We want our simple components to be the children of the more complex parents that do all the heavy lifting including sending down props.

MAP

If you are unfamiliar with map, one of my favorite higher order functions, I would recommend reviewing it. Map is called on an array and is provided a callback function and returns a new array based on the results of the function provided. You use it a ton in React.

{this.props.stacks.included.map( card => {
  if (card.relationships.stack.data.id === this.props.id)
    return (
      <div key={card.id}>
        < Question front={card.attributes.front} id={card.id} configureColor={this.configureColor} handleChange={this.handleChange}/>
      </div>
           )
      }
})}

While this might look intimidating all map is doing is going through the stacks.included array and checking the id of each card and rendering the Question component with the proper props passed in.

The Terms of Redux

Action :: a plain JS object with a type key and potentially a payload of data
Reducer :: a pure function (always returns the same value when given the same arguments) that has a switch statement which checks our action's type and returns a new state
REMEMBER reducers never update the previous state, they create a completely new state object.
There is a lot more to say about Redux. I plan on writing a separate article.

Onward

This marks the end of my Flatiron journey, but I will continue to learn, create, and write! I look forward to what lies ahead!