React-Redux Terminology

Learning new languages always requires to learn new terminology which are usually very strange.
When we are talking about especially on React and Redux, a lot of new terminologies are involved. I hope this articles my help you to get some basic knowledges of strange definitions. These are my notes and brief summary of the React and Redux when I've built my last project of the Flatiron school.

*** Redux vs React***
We are utilizing Redux, our redux store is handling a lot of the data manipulation and communication with our api; whereas, our React application should be mainly for just to display our data.

ACTION CREATOR:
A function that creates an action

ACTION:
An object that contains information about how we want to change some data within our central state

action: {
type: [describes what change we want to make to our data],
payload: [context of what change we want to make]
}

DISPATCH:
A function that takes in an action, makes copies of the action, and sends them out to the reducers.

REDUCER:
A function that takes in an action and some existing data, changes the data according to the type and payload of the action, and then sends the updated data to the state.

STATE:
An object that serves as the central repository of all data from the reducers.

React-Redux
With React-Redux, we use some components and functions to tie React and Redux together: Store, Provider, and Connect.

STORE:
The Store contains the consolidated reducers and the state.

PROVIDER:
The Provider is a component that has a reference to the Store and provides the data from the Store to the component it wraps.

CONNECT:
Connect is a function communicates with the Provider. Whatever component we wrap with Connect, that component will be able to get changes in the Store state from the Provider.

We can configure Connect to get just the part of the data we want from the Provider. Connect passes this down as props into the wrapped components.

The flow with react-redux looks like this:

1. Create the Provider
2. Pass it a reference to our Redux Store
3. Wrap any component that needs to interact with the Store with Connect
4. Connect passes down the different pieces of state and any action creators we need as props down to the wrapped component.

Configuring connect
Connect takes in several arguments, but we will only be concerned with the first two: mapStateToProps and mapDispatchToProps.

*Extracting data with mapStateToProps*
mapStateToProps is essentially extracting just the pieces of the state you want into your component as props. It is important to note that when you specify a function for this argument, you are subscribing the component to changes in that part of the state. If the component does not need to re-render based on changes in the state, you can pass in null or undefined as the argument instead.

*Dispatching actions with mapDispatchToProps*
mapDispatchToProps can be defined as an object of action creators (there's Redux magic behind the scenes but this is a nice shorthand) and binds the dispatch of the store to each of the action creators. This allows you to use the actions creators through props in the component as you would by passing down functional props from the parent without Redux.