Знание Redux в реакции - PullRequest
Новая
       24

Знание Redux в реакции

0 голосов
/ 11 марта 2019

Мой редуктор похож на 

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'Hello': {
            console.log('hello');
        }
        default: return state
    }
}

Я бы хотел отделить action от редуктора. Я хотел бы импортировать его в редуктор из другого файла. Как я могу это сделать?

Другой вопрос

У меня есть кнопка submit, как показано ниже. 

<div onClick={this.handleSubmit}>Submit</div>

Я вызываю функцию ниже при нажатии кнопки отправки. 

handleSubmit = event => {
    this.props.dispatch( { type: 'Hello' } );
  }

Что здесь type? Почему я должен использовать это? Что он делает внутри редуктора / действия?

1 Ответ

0 голосов
/ 11 марта 2019

тип действия - это строка, которая просто описывает тип действия. Они обычно хранятся как константы или собираются в перечислениях, чтобы помочь уменьшить количество опечаток. 

export const Actions = {

  GET_USER_DETAILS_NAME: 'NAME',
  GET_USER_DETAILS_AGE: 'AGE',
  GET_USER_DETAILS_LOCATION: 'LOCATION',

  // more...
};

Действие для извлечения пользователя по имени Боб может выглядеть примерно так 

{
   type: 'NAME',
   payload: 'Bob'
}

Редукторы определяют, как изменяется состояние приложения в ответ на действия, отправленные в хранилище. 

function getUserDetails(state = initialState, action) {
  switch (action.type) {
    case NAME:
      return Object.assign({}, state, action.payload)
    case AGE:
      return Object.assign({}, state, action.payload)
    case LOCATION:
      return Object.assign({}, state, action.payload)
    default:
      return state
  }
}
...