Redux Working - 2. Retrieve Redux Data - mapStateToProps

How to Fetch Redux Data ?

Purpose: Want to fetch THE SM STORE data (What is THE SM STORE?)

Our whatsapp analogy says to read/fetch data of any components

from STORE (group), it needs to be CONNECTED.

Unable to understand above line, go through what is Redux.

REACT-REDUX provides really easy way to connect to THE STORE...

Step 1: Import connect() method from react-redux.

import { connect } from 'react-redux'

Step 2: connect the component which wants STORE data.

export default connect(mapStateToProps, mapActionToProps)(OurComponent)

But wait a minute what are these mapStateToProps, mapActionToProps ?

Let’s Understand via analogy...

How our neighbourhood supermarket/store help us get the required item in easy way:

1. They employ helpers to help us get the right item.

2. They have sign boards hanging, for us to reach at right row to fetch required item.

3. They provide scanners to get right weight and price.

POINT TO NOTE:

These helper tools don’t do anything by themselves, Once you visit the STORE,

you have to summon them to avail the services.

(sounds like dark lord summons the spirits to do the work… scary... :))

Same as our neighbourhood store, REDUX STORE also provides two helper methods called

1. mapStateToProps.

2. mapActionToProps.

And just like normal store, these helper methods do not do anything without summoning them i.e.

1. you have to call them (override them) in your component and

2. tell them explicitly what do you want.

By adding below code in our component , we are summoning mapStateToProps

          const mapStateToProps = () => {

anyVarName: state.componentXData

}

And what helper is doing:

1. Mapping some store state data to local variable.

2. Adding that local variable into component props.

3. And hurrey!!!! we have access to the required data via props.anyVarName

anywhere in the component.

In essence mapStateToProps as name suggests take explicitly stated state

data from THE STORE and adds them into component props.

i.e. In our above example we are accessing componentXData from THE STORE and

adding it into props variable named anyVarName.

which is accessible within OurComponent as props.anyVarName.

Isn’t it awesome…

To conclude:

If you want to get any STORE data in you component, do below
1. Connect() the component

2. Summon(override) mapStateToProps

3. And boom you have data as props in your component

It can’t be made more easier then that….

You must be thinking out loud, how can I conclude...

we still have to demystify mapActionToProps…

Yes we will, that is our next topic Creating and Deleting THE SM STORE Data

Previous: THE SM STORE  Next: Create/Delete Redux Data

Redux Working - 1. Creating THE SM STORE

How Redux works ?

If you are coming directly to this page, I would suggest you to read what is Redux, to better understand the analogy I am using to explain ‘How Redux Works’.

As we understood, In Redux we have something called STORE, which CONTAINS the STATE info of every CONNECTED component.

If you are unable to understand above line, go through what is Redux.

So the STORE is something which manages the states, let me call it THE State Management (SM) STORE.

Let’s create THE SM STORE first and make it accessible to our app components.

In REACT It’s really simple and izzy-pizzy to create store - use createStore() method provided by react-redux library.

1. install react-redux for your application:

              sudo npm install react-redux -g

2. import react-redux in your component

             import createStore from ‘react-redux’

3. create a store :

             let store = createStore();

Damn easy, isn't it...

We have opened/created our store, but how application components will use it ?

Just like normal store... via entry exit doors.

Redux is so simple that it names entry exit doors as PROVIDER.

In below code snippet <ourApp> has been provided access to the store.
Once app is inside the STORE, it can perform all permitted operations (Create Retrieve Delete)

<Provider store = {

  }>

               <OurApp/>

</Provider>

I will break the Redux working into basic CRUD operation.

Create : Create component's state in THE SM STORE.

Retrieve : Fetch component's state from THE SM STORE.

Update : REDUX 2nd Principle says STATE is read only, so no update allowed

Delete: Remove the component's state info from THE SM STORE.

Previous: What is Redux      Next: Retrieve Component State