Redux - is there any way to explain it easier

First you need a store. This store is the central repository of data and you can work with data here.

#1 Code

import { createStore } from 'redux'

const reduxstore = createStore(appreducers)

What is reducer? It is sets the value of our data. It could be a single record update or appending to a list.

<Provider store={reduxstore}>

</Provider>

When you set this up, this means you're making the store available to component underneath it.


#2 - When you have your store, what do you do next?

You want your component to be able to work with it, meaning you send data and get certain data that you need.

First you need to use a "connect"from react-redux. And you wire it to your component.

Importing the connect function

import { connect } from 'react-redux'

Next you defined a simple component like you would do normally.
And finally you make your store accessible to your component using code below.

export default connect(mapStateToProps,mapDispatchToProps)(AddToCart)

Some details.

Generally you need to send some 'commands' to store using dispatch. As your component gets more complex, you probably see alot of dispatch in your code.

So this is where mapDispatchToProps comes in. Its really to say simplify my dispatch call and make it more meaningful.

mapStateToProps trying to say, i need to be dealing with specific data 'channel'. So maps those for me, so can use it in my components.