Как передать новое значение в магазин Redux через onPress?

Question

Я разработчик Vue, пытаюсь справиться с React Native & Redux - я хорошо разбираюсь в Vuex, но изо всех сил пытаюсь понять структуру Redux.

Насколько я вижу в журналах консоли, я правильно настроил действия / хранилище.

Я пытаюсь получить кнопку для установки состояния в магазине с помощью onPress. Это кнопка:

function mapStateToProps(state) {
  return {
      address: state.address
  }
}

function mapDispatchToProps(dispatch) {  
  return {
      address: (value) => dispatch({ 
        type: 'UPDATE_ADDRESS',
        placeName: value })
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)

И моя кнопка / текст для изменения информации и отображения информации

      <Button
        title="set address"
        onPress={() => this.props.address('new address')}
      />
      <Text>{store.getState().placeName}</Text>

Файл редуктора выглядит следующим образом:

const addressReducer = (state = initialState, action) => {
  console.log("in here");

  switch(action.type) {
    case UPDATE_ADDRESS:
      return {
        ...state,
        placeName: action.payload
      };
    default:
      return state;
  }
}

Но когда я console.log action.payload, он не определен.

Не можете ли вы передать значения в магазин, как это? Когда я нажимаю кнопку, <Text>{store.getState().placeName}</Text> не обновляется, он просто говорит «Привет, мир».

Answer 1

Ваш код почти верен - всего несколько настроек, чтобы получить его за чертой.

Сначала ваше действие UPDATE_ADDRESS передает «значение» редуктору через placeName, а не payload. В вашем редукторе внесите следующие изменения, чтобы убедиться, что вы обращаетесь к placeName (вместо payload, который будет неопределенным):

case UPDATE_ADDRESS:
      return {
        ...state,
        /* placeName was defined in your action creator */
        placeName: action.placeName 
      };

Наконец, чтобы обеспечить отображение пользовательского интерфейса при изменении хранилища (т. Е. После того, как ваш редуктор обрабатывает действие UPDATE_ADDRESS), вам нужно обновить метод render() следующим образом:

  <Button
    title="set address"
    onPress={() => this.props.address('new address')}
  />
  { /* Render placeName via prop provided by mapStateToProps */ }
  <Text>{ this.props.placeName }</Text>

Опора placeName определяется / предоставляется вашей функцией mapStateToProps(), когда ваш компонент <Home /> "подключен" к магазину.

Способ взглянуть на mapStateToProps() состоит в том, что он отображает биты состояния, в которых заинтересован ваш компонент <Home /> (т.е. из вашего глобального хранилища), в фактические реквизиты, которые передаются компоненту <Home />.

Именно поэтому вы можете получить доступ к placeName через this.props из вашего <Home /> метода визуализации компонентов -

надеюсь, это поможет!