Блог

Я начал работать с redux в react native и столкнулся с проблемой с функцией mapStateToProps. Я хочу сделать функцию универсальной для всех моих переменных из моего хранилища, чтобы мне не нужно было обновлять каждую отдельную переменную в mapStateToProps-функции.

Когда я нажимаю на кнопку, чтобы обновить переменную, например this.props.secondDishAmount, я также должен обновить все остальные переменные, потому что в противном случае переменные становятся неопределенными.

Есть ли способ изменить mapStateToProps-функцию, чтобы сделать ее универсальной?

Заранее спасибо!

 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)
  

Есть несколько вещей, которые вы должны сделать, чтобы улучшить этот код:

• Во-первых, вы должны переключиться на использование нашего официального пакета Redux Toolkit, который является нашим рекомендуемым подходом для написания логики Redux.
• Если вы собирались писать редукторы «вручную», вам следует использовать оператор распространения объекта JS для распространения существующих полей состояния в каждом случае:

         case 'DECREASE_COUNTER':
            return {
                ...state,
                firstDishAmount: state.firstDishAmount - 1,
            }

  

• Однако, используя Redux Toolkit, вы можете написать «изменяющий» код, который фактически превращается в безопасное неизменяемое обновление:

 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;
  

• Если вы собираетесь использовать connect с React, вам следует использовать «сокращенную форму объекта» mapDispatch :

 import { decreaseCounter } from "./shoppingBagSlice";

const mapDispatch = { decreaseCounter };

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

• Но мы также рекомендуем использовать API-интерфейс React-Redux hooks вместо connect .

Я только что опубликовал совершенно новый учебник по основным документам «Redux Essentials», в котором начинающих обучают «как правильно использовать Redux», используя наши новейшие рекомендуемые инструменты и методы. Я бы посоветовал вам проверить это:

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