How can I dispatch function in redux?

by

My recommendation would be to not store redundant (derived) information in state. This means you don’t need to (nor should you!) store the total in the state. The main reason this is a problem is that it gives your state an opportunity to contradict itself… if your state’s total key doesn’t equal the sum of the item totals, you’ve got a big problem!

Instead, you can create a function that calculates the total and simply call that when you need it. For example:

const calculateTotal = state => {
  let total = state.cart.reduce((total, item) => {
    return total + item.quantity * item.product.price 
  }, 0);
  // Assuming you just have one coupon, you could maintain a boolean in state
  if (state.hasCoupon) {
    total -= 50;
  }
  return total;
}

And then, anywhere in your code you need to get the total, you can simple use this function. It’s not uncommon to include this sort of function in mapStateToProps:

const mapStateToProps = state => ({
  total: calculateTotal(state);
});

If you end up with a lot of derived state, you may see some advantages from using a selector library like Reselect which can help you build selectors derived from other selectors and implements memoization for performance boosts.

More Related Contents:

  1. Global state in React Native
  2. Component won’t update when a redux state change occurs
  3. Could not find “store” in either the context or props of “Connect(App)”
  4. React Context vs React Redux, when should I use each one? [closed]
  5. Understanding React-Redux and mapStateToProps()
  6. How do I access store state in React Redux?
  7. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  8. Changing the layout of a component depending on Redux state
  9. Redux Presentational Components Vs Container Component
  10. react similar JavaScript library [closed]
  11. What is component in reactjs?
  12. How to create a translucent in React Native?
  13. Programmatically Navigate using react-router
  14. Why do we need middleware for async flow in Redux?
  15. if-else statement inside jsx: ReactJS
  16. How can I display a modal dialog in Redux that performs asynchronous actions?
  17. How do I test axios in Jest?
  18. How to update single value inside specific array item in redux
  19. Adding new data to firebase users
  20. Why use Redux over Facebook Flux? [closed]
  21. How to register event with useEffect hooks?
  22. React Native: Getting the position of an element
  23. How to sync Redux state and url hash tag params
  24. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  25. What is useState() in React?
  26. Navigate to screen after opening a notification?
  27. Cannot update a component while rendering a different component warning
  28. Programmatically change Redux-Form Field value
  29. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  30. import * as React from ‘react’; vs import React from ‘react’;

Leave a Comment