как использовать mapDispatchToProps в реагировать на реду

Question

Я новичок в редуксе.

Мой код:

Главный экран

<Text> {{this.props.mycity}} </Text> 
const mapStateToProps = function(state) {
    return {
      mycity: state.layersFlag.baseDistrictADhabi //consist true/false 
    }
}

export default connect(mapStateToProps)(HomeScreen);

Экран бокового меню: UI

<Switch onValueChange={(flag) => {
   this.props.toggleCity();
} value={this.state.city} /> 

const mapDispatchToProps = dispatch => {
    return {
        toggleCity: () => {
            dispatch({ type: "changeCity" })
        }
    };
};
export default connect(null, mapDispatchToProps)(SideMenuScreen);

Настройка магазина и редуктора:

const initialState = {
    city : {
        mycity: true
    }
};

const reducer = (state = initialState, action)=>{
    switch (action.type) {
        case "changeCity":
        return Object.assign({}, state, {
            mycity: action.payload.mycity
        })
    default:
        return state;
    }
}

const Store = createStore(reducer);

Я застрял в sidemenu. Как отправить в методе mapDispatchToProps:

Как передать действие в mapDispatchToProps в sidemenu?

Answer 1

Если мои предположения относительно того, что делает ваш компонент Switch, верны, он вызовет прослушиватель событий onValueChange, когда вы передадите this.state.city в value проп.В итоге вы звоните this.props.toggleCity(), чтобы отправить свое действие changeCity.Я думаю, что установка здесь правильная ...

Однако похоже, что ваш редуктор ожидает action.payload, который вы никогда не проходили как часть действия.

const reducer = (state = initialState, action)=>{
    switch (action.type) {
        case "changeCity":
        return Object.assign({}, state, {
            mycity: action.payload.mycity
        })
    default:
        return state;
    }
}

Так что да, диспетчеризация работает правильно, но вы не передаете все необходимые данные, чтобы ваш редуктор возвратил новый фрагмент состояния.

Вам необходимо обновить mapDispatchToProps, ваш обработчик событий иу вашего редуктора что-то вроде

<Switch onValueChange={(flag) => {
   this.props.toggleCity(this.state.city);
} value={this.state.city} /> 

const mapDispatchToProps = dispatch => {
    return {
        toggleCity: (myCity) => {
            dispatch({ type: "changeCity", payload: myCity })
        }
    };
};
export default connect(null, mapDispatchToProps)(SideMenuScreen);

У вашего редуктора также, кажется, есть дополнительный ключ, вам не нужно обращаться к реквизиту mycity в полезной нагрузке, если она уже полезна.Обновите до:

const reducer = (state = initialState, action)=>{
    switch (action.type) {
        case "changeCity":
        return Object.assign({}, state, {
            mycity: action.payload
        })
    default:
        return state;
    }
}

Добавив, если вы хотите, чтобы ваш компонент Hone повторно рендерился с новыми данными в вашем избыточном состоянии, вы можете сделать что-то вроде этого.

В вашемКомпонент HomeScreen, используйте переменную состояния для сохранения вашего abudhabi или любого другого значения города и вызовите componentDidUpdate () для установки и повторной визуализации вашего компонента.

class HomeScreen extends React.Component{
   state = {
      abudhabi: false
   }

//when the component gets the new redux state this will trigger
  componentDidUpdate(prevProps){
     if(this.props.abudhabi !== prevProps.abudhabi){
        this.setState({
           abudhabi: this.props.abudhabi 
       })
     }
  }
}