Taste of Redux
Tags: javascript, redux, react, webdev
Published: 2021-10-22 21:38:14

### What dependencies do you need?

For those who are familiar with react hooks, `React` is of course the one you should import. For Redux, you need the following imports

In your main app file, where every component has gathered to demonstrate on your browser, you will need 

```javascript
import { createStore } from "redux"
import { Provider } from "react-redux"
```
From **createStore**, the web page will be rendered and each state in your component will be tracked.  

```javascript
const store = createStore(reducer)
```

Then, **Provider** allows us to *distribute* the state to different components - this is not the final step of distributing though, you need to do something to your components. 

```javascript
function App() {
	return (
		<Provider store={store}>
			<Navbar />
			<CartContainer />
		</Provider>
	);
}
```

Notice that your store is now set up as a prop in Provider component

Now let's go back to reducer from createStore argument, where is the reducer coming from? You can write reducer function in the same file but for neatness we are going to create our own reducer file  

Now, if we go to reducer file, we will see reducer function and it takes two things as arguments: state and action

```javascript
const initialState = {count: 0, id: 0}

const reducer = (state = initialState, action) => {
        ...
}
```

state is equal to the initialState is how initial state is set up in redux. The action parameter will be used to keep track of user action in our web. 

Now, if we go to bottom components/smaller components where state change is happening, we need the following codes:

```javascript
const {connect} from 'react-redux'
```

This is where the tricky part starts, from **connect**, we will see a cool argument which also acts as function to pull state from top components to the bottom.

```javascript
const CartContainer = ({count, dispatch}) => {}
```

Many questions can arise here, where is **count** coming from? We didn't set this up in our top component and pass it as prop. And, What is dispatch? 

To figure it out, we need to look at the following codes below (this is usually at the bottom of your component) 

```javascript
const mapStateToProps = (state) => {
        return {count: state.count}
}

export default connect(mapStateToProps)(CartContainer);
```

So, this basically means, you are connecting CartContainer to the state from the Provider. 

Since you are returning that mapStateToProps object and return count property from the state, you can now use count in the CartContainer and pass it as prop. dispatch is automatically added when you connect - how convenient!

For those who used dispatch from useReducer hook, it is injecting type of action and payload when user do something on the elements you create say for example, a button click to increase value or something. 

Note, you can also map dispatch itself to props 

```javascript

const mapDispatchToProps = (dispatch, ownProps) => {
	const { id, amount } = ownProps;
	return {
		remove: () => dispatch({ type: "REMOVE", payload: { id } }),
		increase: () => dispatch({ type: "INCREASE", payload: { amount, id } }),
		decrease: () => dispatch({ type: "DECREASE", payload: { amount, id } }),
	};
};

```

if you do this, you don't need to pass dispatch as prop and instead use more descriptive keys such as remove, increase, decrease for dispatch. 

**ownProps** is whatever has been passed as props to your component from *prop-drilling* - meaning it has been passed from the top component. 

Also, when your projects get big (I mean that's what instructors say, but I have never done big projects), you do what people call action creators. 

From your reducer file, you write

```javascript
const removeItem = (id) => {type: 'REMOVE', payload: { id }}
```

So basically you are saving the argument as payload and define action type to use in the mapDispatchToProps. 

This is kind of redundant, but this is what you will see in your component 

```javascript
const mapDispatchToProps = (dispatch, ownProps) => {
	const { id, amount } = ownProps;
	return {
		removeItem(id)),
		increaseItem(id, amount)),
		decreaseItem(id, amount)),
	};
```

of course, assuming that you have imported them from reducer.