One More Reason To Use Redux

Let's take a moment to imagine how messages were passed in time past. So, great-grandpa wanted to send a message to his great-grandson but every man only has access to the son he gave birth to, you can imagine how long the message-tree will be. I can imagine it would go something like this;

great-grandpa -> grandpa -> pa -> son(great grand-son of great grand-pa)

That feeling of 'What the hell?' you probably have right now, is the feeling I get every time I have to pass props around in React through components that necessarily don't need them but are serving as what I call 'carrier-agents'. For me, it is exhausting, to say the least. This is one of the major reasons I use Redux. In this article, I shall explain what 'mapStateToProps' means and how it saves us the stress of using 'carrier-agents'.

To get the basics about how reducers are used to manage state, you can check out my previous article here. This article is a sequel to that, hence, I would proceed with the previously created store. The store.getState() command yields;

state = {
books: [book1,book2],
filter: true
}

Book1 and Book2 are book objects but I chose to represent them as such for easy readability. We are going to create a component that needs access to some items in the store and I would walk you through accessing those items.
But first, we would recreate something similar to the great-grand-pa, great-grand-son relationship we stated above.

const App = () => (
  <div>
    <BooksList />
  </div>
);

const BooksList = () => (
  <div>
    <ShowBooks />
  </div>
);

// The Provider looks something like this from the previous article;

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

I am sure you can already figure the relationship out. Great-grandpa is the Provider which has the store, Grand-pa is the App component, Pa is the BooksList component and son(great-grandson of great-grandpa) is the ShowBooks component.
Fortunately, our great-grandson (ShowBooks) can access every item grandpa (Provider) has got, and it can do this independently. This is how:

Steps To Follow

• Connect: Import 'connect' from 'react-redux'. This is what connects you to the Store in the Provider.
• Create 'mapStateToProps': This is the function that maps the state of your Store to the props of your component, thereby making it accessible in your component when you call 'this.props'. You decide the names of the properties you want the store to be mapped to.
• Export your Connected Component: When exporting your component, you export your component already connected to your store, using the 'connect' you previously imported.

import React from 'react';
import { connect } from 'react-redux';

const mapStateToProps = state => ({ books: state.books, filter: state.filter });

const ShowBooks = ({books, filter}) => {
  console.log(books); // [ book1,book2 ]
  console.log(filter) // true
};

export default connect(mapStateToProps, null)(ShowBooks);

And as easy as that, we skipped the 'carrier-agents'. I hope I have been able to convince you of one more reason to use redux. Do let me know if you have any questions.
Twitter.. Linkedin.. Github