ref – https://eslint.org/docs/rules/object-shorthand

todos

Say we want to add Reporting component to the web app.
We first create the component.
We do a simple return of basic html.

Now that this component exists, we import it into our App file.

You should now see “Testing 1 2 3” in the output.

Adding the reducer

We now add the reducer. The reducer controls the state the data is in. Thus, naturally, we want to have an initial state. We want to say that whatever happens in the app, according to MACROS that gets passed in, we want to return the state of the data.

Thus, we declare the MACROS in the action file. The action file does two things:

1) contain functions that return action objects. Notably, there is a type property in this action object that contains a MACRO. This MACRO describes what kind of action it is.
i.e fetching report has started, fetching report error, fetching report finished.

2) contains the MACRO definition themselves

/src/actions/index.js

and then say if the action type is
this, then we want to return a certain state.

In our case, we have a state where the fetching of the report has just started.
So we want to set the property to certain defaults.

However, notice that the reducer 1st parameter is the initial state. So make sure you set that.

/src/reducers/reportingReducer.js

Add in mapStateToProps and connect

Now we import connect function from redux and use it to connect our component to the store.

Right now, we just simply connected the component to our mapStateToProps.

Hence, when we refresh the web app our output goes in this order:

1) Component initializes with connect function

the connect function gets run first. – √ connect data to Reporting component.

2) Initialize all reducers

all reducers will receive a default action object with a system INIT macro string. You won’t have to worry about it. Your reducers should simply return the initial states. This will happen for all reducers like so:

reducers/todos.js

reducers/reportingReducer.js

reducers/visibilityFilter.js

3) combineReducers

Now that all the reducers have been initialized, the next step is that we use Object Literal Shorthand in order to create an object literal and declare its properties and values.

so for example this:

becomes this:

hence, we create an object literal with all the reducers as properties like so:

then insert it into combineReducers:

src/reducers/index.js

In other words, we created a object literal using short hand notation.
We declare property ‘todos’, and point it to object todos.
We declare property ‘visibilityFilter’ and point it to object visibilityFilter.
We declare property ‘reportingReducer’ and point it to object reportingReducer.

4) createStore

We then pass this temporary object into the createStore parameter. As a result, we get a singleton store. What’s in the store will reflect what’s in this object.

Now, in mapStateToProps of our Reporting component, let’s look at

Now that the reducers were initialized, and the store created, the store state gets passed into our mapStateToProps.

It will be logged as:

{
reportingReducer: {reportingData: null, reportingLoading: false, reportingError: null}
todos: []
visibilityFilter: “SHOW_ALL”
__proto__: Object
}

The reason why it has those properties is because earlier we created an temporary object with data from our reducer files, and initialized the store with it.

5. mapStateToProps

Once we reach this function, we’re literally trying to map the store’s data into Reporting component’s this.props.

Thus, the reportingState should have all the data of the store. You can check by logging reportingState as shown. Before the other functions are called, this mapStateToProps will be executed. You can decide what kind of objects are returned. These returned objects will be reflected in your this.props.

Now when the component refreshes itself by calling render and componentDidLoad, check log your this.props. You’ll see that it has been updated with the store data.

dispatch: ƒ dispatch(action)
reportingReducer: {reportingData: null, reportingLoading: false, reportingError: null}
todos: []
visibilityFilter: “SHOW_ALL”
__proto__: Object

Creating a trigger

In your reporting.js, insert this code. We have inserted an object to represent mapDispatchToProps.

Let’s use this dispatch function in our componentDidMount:

We then execute the action of fetching the reports.

output:
——————-> calling fetchReportingAction
index.js:67 actions/index.js – called fetchReporting

An action will trigger all the reducers via the connect function.
Hence, all of our reducers will check to see they handle the action.type.

todos.js:3 — reducers/todos.js —
todos.js:4 received action:
todos.js:5 Object
todos.js:26 todos.js – no action.type found. default return state
visibilityFilter.js:5 — reducers/visibilityFilter.js —
visibilityFilter.js:11 visibliytFilter.js – no action.type found. default return state

Going through todos and visibilityFilter reducers, we do not handle the specific action.type.
However, in reporting reducer, the action.type matches.

Hence, say we want to update reportingData property with: [‘ricky’, ‘joy’, ‘en en’]
We update it by returning a temp object with the new values.

output:

reportingReducer.js:10 — reducers/reportingReducer.js —
reportingReducer.js:12 received action is:
reportingReducer.js:13 Object
reportingReducer.js:18 — action.type found! –FETCH_REPORTING_STARTED
reportingReducer.js:19 returning state object with updated action.data…

Once the store gets updated, mapStateToProps of our Reporting component is called to let us know we can update our component with whatever data we want from the whole store.

Reporting.js

Take note that parameter storeState has data from the whole store. It looks like this:

reportingReducer: {reportingData: Array(3), reportingLoading: true, reportingError: null}
todos: []
visibilityFilter: “SHOW_ALL”

We need to filter what we want. For example, if we only need reportingReducer for our this.props, then we need to return just that part.

Then the this.props in your render and other component functions would only have data like this:

{reportingData: Array(3), reportingLoading: true, reportingError: null, fetchReportingAction: ƒ}
fetchReportingAction: ƒ ()
reportingData: (3) [“ricky”, “joy”, “en en”]
reportingError: null
reportingLoading: true

ref – https://react-redux.js.org/using-react-redux/connect-mapstate
https://react-redux.js.org/using-react-redux/connect-mapdispatch#connect-dispatching-actions-with-mapdispatchtoprops

Connecting React components with the Redux data store

Implementing reducers for the store

First, we create a reducer directory.
In it, we create reducer/todo.js, where we define global variable todos.
It is a reference to a reducer function with two parameters: a state, and an action object.

The state object holds initialized and current information on store’s state. The action object holds an object with a type property, and other custom properties.

Refresh the page and you’ll see a empty list.

If you want to initialize the list to having existing data, you’d initialize the state object like so:

The reason why we initialize using properties id, completed, and text is described in component TodoList.
It describes the todo property as an array.
This array contains object with attributes like so:

We will get to component TodoList later. Now refresh the page, you’ll see data in the list.

Basically, once a reducer is defined, it is combined with other reducers, and then passed into createStore so that the app can create a singleton store.

The reducer function’s 2nd parameter is an action object, which is sent by an action function, as will be described later. We know which action was triggered by looking at:

action.type

We can then work towards manipulating the state according to that action. Once, we’re done manipulating the state, we return it. This means we have updated the store.

As explained earlier, we have many different reducers, and we combine them all in order to give it to the store.
We do so by using combineReducers

Now that we have all the reducers, we simply insert them into the first parameter of createStore in our main index.js:

Notice createStore function.

redux’s createStore function

ref – https://redux.js.org/api/createstore

createStore(reducer, [preloadedState], [enhancer])

We pass in reducer functions to the createStore, which then creates a singleton store for the app to use.

TodoList component

The TodoList component is used by VisibleTodoList container. The container connects the component to the store.

TodoList component returns JSX in order to display data from each individual todo object.
However, before it does, it must define its own properties. Namely:

– todos (array)
– toggleTodo (function)

todos is an array of objects. Those objects have properties id, completed, text. This is the reason why in our reducer function, when we initialized the state object, we must initialize it according to the properties indicated here.

TodoList component has one object initializer parameter. Its properties are todos, and toggleTodo as defined above.

Now, let’s look at mapStateToProps function in container VisibleTodoList:

If a mapStateToProps function is specified (like we have), the TodoList component will subscribe to Redux store updates. This means that any time the store is updated, mapStateToProps in container VisibleTodoList will be called.

Your mapStateToProps functions are expected to return an object. This object, normally referred to as stateProps, will be merged as props to your connected component (TodoList). What gets returned from mapStateToProps is an object that identifies the property we want to change in TodoList component. We’re saying, we want to update property todos’ values.

Thus in mapStateToProps, make sure we return updated property ‘todos’.

Triggering the Action

Let’s create an ‘action’ directory, and an index file: action/index.js.

This is where all of your action functions are. In our case, we have an action function called toggleTodo

We have connected this function to a click handler in VisibleTodoList.js. Once that click handler has been invoked, we execute this action function. This action function returns an object, and this object gets passed into the ‘dispatched’ function for the store. dispatch is a function of the Redux store. You call store.dispatch to dispatch an action. This is the only way to trigger a state change.

Since we triggered a change in state, it will then execute todos reducer function in reducer/todos.js. This is because in container VisibleTodoList, it has connected the state todos array, to toggleTodo function together. Once click handler has happened for toggleTodo, it will trigger change in the todos array.

Hence, when you click on a text, you’ll see this log:

index.js:43 src/actions/index.js (ACTION) returning object of type TOGGLE_TODO and id: 0
todos.js:14 src/reducers/todo.js – (REDUCER) TOGGLE_TODO!
VisibleTodoList.js:35 src/containers/VisibileTodoList.js – mapStateToProps
TodoList.js:7 src/components/TodoList.js – TodoList
TodoList.js:8 [{…}]
Todo.js:19 src/components/Todo.js – Todo

However, notice that it then calls our connector file VisibileTodoList.js’s mapStateToProps.
This is because it’s trying to propagate updates to all that have been connected to our store.

Now that we have our reducers implemented and in place, let’s see how actions trigger those reducers.

First, in container VisibleTodoList.js, we have two parts:

– TodoList component (UI)
– Redux data store. (data)

this is where we connect our UI to data.

We import the UI component TodoList like so:

Then we connect the UI to the data via connect, mapStateToProps, and mapDispatchToProps function.

..notice the connect function.

The connect function

With React Redux, your components never access the store directly – connect does it for you. React Redux gives you two ways to let components dispatch actions:

As the first argument passed in to connect, mapStateToProps is used for selecting the part of the data from the store that the connected component needs. In our example below, TodoList is the component in need. We call connect on it to make it into a connected component.

The connected component TodoList receives dispatch calls from the action function, and then can dispatch actions onto itself via reducer functions. These reducer functions looks at the returned action object’s type property.

Therefore, we see that the connection function “connects” component TodoList to the two functions. One is to maintain state todos. The other is to dispatch actions via click handler toggleTodo.

Connecting the data

In order to connect the UI to the data store, we need to use Redux store’s dispatch function in order to apply a state change to the store. We pass in an action function into the dispatch parameter to let it know how we want this state to change:

In other words, as the second argument passed in to connect, mapDispatchToProps is used for dispatching actions to the store.

dispatch is a function of the Redux store.

You call store.dispatch to dispatch an action. This is the only way to trigger a state change.

With React Redux, your components never access the store directly – connect does it for you. Our connected TodoList component receives props.dispatch and can dispatch actions onto itself. Hence, that’s why we give toggleTodo function to the dispatch function. Whenever we apply a state change via an action, we want this toggleTodo to be called.

we imported this function from actions:

toggleTodo return an action object with 2 properties and their data.

This action object matches up with the action parameter of a reducer function. A Reducer function will take this action object and evaluate its type.

Once, it sees that the property ‘type’ is of string ‘TOGGLE_TODO’, then it will go ahead and modify the state accordingly. In our case, it evaluates the array of strings in state, to find if the todo object’s id matches up with the id in our action object.

In other words, for every todo object, if the todo.id === action.id, then we flip the completed flag by
doing

All other properties of the todo object stays the same via

Thus, due to our TodoList component being connected to the store in VisibleTodoList.js, our reducers functions are patiently waiting for action objects to be sent from the action functions.

Once the action function fires, our reducers will receive it via its action object, and we then manipulate the state and return it.

ref – original github

source, with my comments and logs

The app starts off with ReactDOM.render

where we use redux’s applyMiddleware and createStore to create a store with some combinedReducers:

Pay attention here in that a property is mapped to a reducer. So whatever data the reducer returns will be mapped to that property. And that property is kept in the store.

Our reducers are initialized with starting state

for example, ContactsReducer is imported from:

So this means store’s contacts property now has an array of member names and phones.

These reducers are then run with initial state and type at @@redux/INIT
Then the store is created.

Each component’s mapStateToProps will run first, because we need to map the state from our store onto our component’s props.

The component does this and receives the store’s state.

It takes what it needs and creates contacts property and initializes with our store’s state’s contacts data.

Then component then renders. After finishing rendering, the componentDidMount is called.
Finally, the app’s componentDidMount will be called.

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

and

The contacts, and activeContact property is now available in our state object.

Now, look at a component’s mapStateToProps. Basically, it gets the store’s state as the parameter, and then extract whatever property we need and return it to the component. i.e contacts

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.

Mapping Action to Component props

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 like so:

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

when the handler is clicked, the action function selectContact is called. It returns an object.
Take note that this reducer is mapped to property activeContact in combineReducers

{name: ‘Michael’, phone: ‘0988765553’}

with type CONTACT_SELECTED

This is the action object.

Then, ALL reducer functions are then called to see if this action type CONTACT_SELECTED is theirs.
It happens so that our reducer_active_contacts.js reducer function takes care of this CONTACT_SELECTED.

We see the action being passed in

{type: ‘CONTACT_SELECTED’, payload: {…}}

The reducer returns the payload object. The component will then map this payload to its prop property say ‘contact’ by using mapStateToProps

Now the active contact components will render with the new data.

This is a react native app. Make sure you have expo installed.

demo

make sure to type ‘npm install’ to install all the packages.

Then type ‘npm start’.

Blogs
We install redux, and then import it for usage.

Comments

We import the store variable from Blogs.

AppContainer

Let’s configure our react navigation.
We also implemented our Blogs and Comments components above. We would use these components.

App.js