Adding Redux State Values

Question

I'm trying to combine two separate prices into one total price. I have the two individual price states stored and correctly updating using independent reducers, but I need a way to combine these two dynamic values into a third, total price state.

import React, {useState} from "react";
import { useSelector, useDispatch } from "react-redux";

const planPrice = useSelector(state => state.planPrice);
const repairPrice = useSelector(state => state.repairPrice);

//Use the state hook to store the Total Price
const [totalPrice, setTotalPrice] = useState(0);

const [items, setItems] = useState([]);

function addItem (newItem) {
    setItems((prevItems) => {
        return [...prevItems, newItem];
    });

    //Update the Plan Price
    if ({plan}.plan === "Premium") {
        dispatch(addItemPremium());
    } else if ({plan}.plan === "Basic") {
        dispatch(addItemBasic());
    }

    //Update the Repair Price
    if (newItem === "Small Chip") {
        dispatch(addSmallChip());
    } else if (newItem === "Big Chip") {
        dispatch(addBigChip());
    }

    // //Update the Total Price
    setTotalPrice({planPrice} + {repairPrice});
}

Is this even possible using Redux, or am I going about this the wrong way?

Do you want to store it in redux state and use it elsewhere in another component? You can create action creator, and pass the total price as an argument, and then dispatch an action that puts the total price in its own state variable throw its own reducer (if you are using separate reducers). — BlackMath
– BlackMath, Commented Dec 17, 2020 at 0:45

Nick · Accepted Answer · 2020-12-17 00:15:26Z

3

If you have derived state, you should consider using selectors. These are functions that take state as an argument and return a derived state value.

For example:

function totalPrice(state) {
  return state.price1 + state.price2;
}

If you need to use this in mapStateToProps, you can do so as follows:

const mapStateToProps = state => ({
  price: totalPrice(state)
})

If you're using hooks, you can use the useSelector hook:

const price = useSelector(totalPrice);

There are libraries (e.g., reselect) that will help you create composable selectors with caching for efficiency.

Note that the reason you should use selectors versus storing redundant state, as you may have intuited, is that redundant state can get out of sync and then you're hosed. But if you have a function that computes the total price, it'll always be in sync with the individual state parts.

edited Dec 17, 2020 at 0:15

answered Dec 17, 2020 at 0:09

Nick

16.7k3 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cchau Over a year ago

Hey Nick, thanks for the quick response. I'm using the useSelector hook to successfully render the individual price states within the component, but I'm not able to use a function to add together the two prices. I tried an approach using the state hook as well, but for some reason {state1} + {state2} does not return the desired result I need for a total price state. Any other ideas you can suggest?

Nick Over a year ago

Can you provide the code you're working with in your question? Selectors are definitely the commonly-accepted way to do this, so I suspect your code needs some additional troubleshooting

cchau Over a year ago

Sure. I updated my question with all of the relevant code (I think).

Collectives™ on Stack Overflow

Adding Redux State Values

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related