Day 12: React & Redux

The Feyn- oops, too lazy today lol

react-redux Package

We can finally use Redux with React after this long journey (of a few days 🤣), using the react-redux package. This package includes several tools to improve the integration of Redux in React.

Why?

React's state is a mess when things get complex (remember that even if one state updates, we have to write a boilerplate for ALL the other state). Redux is library that can manage state. You see where this is going?

Initiate the integration 🚀!

First, we have to create a Provider:

const Provider = ReactRedux.Provider;

Provider is a Redux wrapper for React that basically says: "I'm in charge of everything under here.". Simply wrap them around your whole React app and you're set!

let store = Redux.createStore(reducer);

// In a render() method...
<Provider store={store}>
  <App />
</Provider>

This state only!

We can restrict component's access to certain state only with the mapStateToProps() function:

const mapStateToProps = state => ({
  light: state.brightness
});

We can then access brigtness inside state.

Afterwords

Today's blog is short cause most of the time I tried to revise what I have learned about React, and they really put it to the test. Hopefully after getting my hands messy on them, the knowledge stuck.

Anyway, good luck to others who are completing this challenge!

Follow me on Github!
Also on Twitter!