React-Redux

In order to map redux store state to a component’s props, we start with the basic reducer functions.

Reducer is a pure (given an input, always return the same output) function that:

1) takes previous state as a parameter
2) takes an action as a parameter,
3) and returns the next state.

First, we declare our pure reducers. It returns an array of objects as state.

This gets returned to the property ‘contacts’ in reducers/index.js

reducers/index.js

The key here is the combineReducers function:

As your app grows more complex, you’ll want to split your reducing function into separate functions, each managing independent parts of the state.

The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.

the contacts will be used in a components, only when mapStateToProps gets called in that component, as will be shown later.

Pass to createStore

CreateStore and CombineReducers are often used together.

It may look like this:

Or it may look like this:

src/index.js

where the reducers are in another file, and we export it to be used.

Either way, we

1) first create the reducer functions.
2) combine them via combineReducers
3) Then create store

Provider’s prop store let’s children components access . data

Notice that App is within Provider.

or

The makes the Redux store available to any nested components that have been wrapped in the connect() function.

Since any React component in a React Redux app can be connected, most applications will render a at the top level, with the entire app’s component tree inside of it.

Normally, you can’t use a connected component unless it is nested inside of a < Provider >.

Hence, our App will be connected.

components/app.js

App is the main container. It houses two other components. Thus, the store data will be available to all containers.

Namely, these containers are ContactList and ContactDetail.

Mapping Redux store state to Component props

1) we map state to Contact List’s props in contact-list.js

Remember we had a reducer function called ContactsReducer that returns an array of objects.
Its property is contacts. We combined it with other reducers using combineReducers.

The contacts property is now available in our state object. However, this state object is available in mapStateToProps.

Now, look at “mapStateToProps”. Basically, it maps the state of (contacts) in the store into this component’s props.
Thus, after mapStateToProps is run, you’ll be able to do use it like so:

such as in renderList().

The important thing here is that once we declared our mapStateToProps function, we map it to the connect function.
Thus, whenever the data changes, it will call our mapStateToProps.

2) we map state to Contact Detail’s props in contact-detail.js

Let’s start at the basic level and look at the reducer function for activeContact.

It takes an action, so an action function will be executed first and then, passed in

Then this reducer function will look at the action object and determine what to do with it from its ‘type’ property.

where payload is

First, mapStateToProps gets called. It maps property ‘contact’ to redux store’s activeContact property in reducer/index.js
Then, in its render function, it can use it like so:

This expression is then used to display details, phone, and whatever attributes is available.

Mapping Action to Component props

Actions are plain javascript objects –

they are payloads of information that send data from your application to your store.

They are the ONLY source of information for the store. You send them to the store using store.dispatch().

In our case, when we return an action object with type and payload properties, they are called Action Creators.

Action creators are exactly that—functions that create actions.

In contact list component, there is an onClick handler, with

The selectMyContact is imported from actions/action-select-contact.js

That function is

when the handler is clicked, the action function selectMyContact is called.

Then reducer_active_contact in reducers/reducer_active_contact.js is called.

The action that gets passed through is the action object returned from selectMyContact.

thus, when it sees that its ‘CONTACT_SELECTED’, it will return the action.payload, which is the payload object from selectMyContact: