CODEWITHSUNDEEP
react-nativereduxreact-redux
devGuy
devGuy

Reputation: 133

Modify mapStateToProps for universal access

I have started working with redux in react native and got a problem with the mapStateToProps-function. I want to make the function universal for all my variables from my store, that I don't have to update every single variable in the mapStateToProps-function.

When I click on a button to update a variable for example this.props.secondDishAmount I have to update all the other variable too because otherwise the variables become undefined.

Is there a way to change the mapStateToProps-function to make it universal?

Thanks in advance!

class Restaurant extends React.Component {

function mapStateToProps(state) {
    return {
        firstDishAmount: state.firstDishAmount,
        secondDishAmount: state.secondDishAmount
    }
}


function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
        addFirstDishToCart: () => dispatch({ type: 'ADD_FIRST_DISH_TO_CART' }),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Restaurant);

...

const initialState = {
    firstDishAmount: 0,
    secondDishAmount: 0,
    thirdDishAmount: 0,
    totalPrice: 0,
    firstDishPrice: 5.9,
    secondDishPrice: 12.6,
    thirdDishPrice: 11.9,
}
const shoppingBagItems = (state = initialState, action) => {
    console.log(state.firstDishAmount, state.secondDishAmount, state.totalPrice)
    switch (action.type) {
        case 'INCREASE_COUNTER':
            return {
                firstDishAmount: state.firstDishAmount + 1,
                secondDishAmount: state.secondDishAmount,
                totalPrice: state.totalPrice,
                firstDishPrice: state.firstDishPrice
            }
        case 'DECREASE_COUNTER':
            return {
                firstDishAmount: state.firstDishAmount - 1,
                secondDishAmount: state.secondDishAmount,
                totalPrice: state.totalPrice,
                firstDishPrice: state.firstDishPrice

            }
        case 'ADD_FIRST_DISH_TO_CART':
            return {
                totalPrice: state.totalPrice + state.firstDishAmount * state.firstDishPrice,
                firstDishAmount: 0,
                secondDishAmount: state.secondDishAmount,
                firstDishPrice: state.firstDishPrice

            }
    }
    return state
}

export default shoppingBagItems;

...

import { createStore } from 'redux';

import shoppingBagItems from '../reducers/shoppingBagItems';


export default store = createStore(shoppingBagItems)

Upvotes: 0

Views: 70

Answers (1)

markerikson
markerikson

Reputation: 67449

There's several things you should do to improve this code:

        case 'DECREASE_COUNTER':
            return {
                ...state,
                firstDishAmount: state.firstDishAmount - 1,
            }
  • However, by using Redux Toolkit, you can write "mutating" code that is actually turned into a safe immutable update:
const shoppingBagSlice = createSlice({
  name: "shoppingBag",
  initialState,
  reducers: {
    decreaseCounter(state, action) {
      // Can safely "mutate" the existing state inside of `createSlice`
      state.firstDishAmount--;
    }

  }
})

// createSlice generates "action creators" automatically
const { decreaseCounter } = shoppingBagSlice.actions;
export default shoppingBagSlice.reducer;

import { decreaseCounter } from "./shoppingBagSlice";

const mapDispatch = { decreaseCounter };

export default connect(mapState, mapDispatch)(MyComponent);

I just published a brand-new "Redux Essentials" core docs tutorial, which teaches beginners "how to use Redux, the right way", using our latest recommended tools and practices. I'd encourage you to check it out:

https://redux.js.org/tutorials/essentials/part-1-overview-concepts

Upvotes: 2

Related Questions