This content originally appeared on DEV Community and was authored by hwangs12
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
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.
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.
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
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:
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.
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)
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
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
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
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.
This content originally appeared on DEV Community and was authored by hwangs12
hwangs12 | Sciencx (2021-10-22T21:38:14+00:00) Taste of Redux. Retrieved from https://www.scien.cx/2021/10/22/taste-of-redux/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.