Taste of Redux

#javascript #redux #react #webdev

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.

Top comments (3)

Lenz Weber • Oct 28 '21 • Edited

Hi, I'm a Redux maintainer.

I'm sorry to tell you this, but the style of Redux you are displaying here is a very outdated style that we are no longer teaching for production use. Modern Redux (since 2019) does not use switch..case reducers, ACTION_TYPE constants, immutable reducer logic or connect/mapStateToProps and is as a consequence a lot more concise and readable.

I would urge you to check it out by following the official Redux tutorial at redux.js.org/tutorials/essentials/... and it would be very great if you could update the article to showcase modern Redux or at least add a warning at the beginning - still far too many people are learning old-style Redux and new articles in that style unfortunately contribute to that problem.