Как дифференцировать ввод от изменений состояния кнопки в реагировать - PullRequest
Новая
       17

Как дифференцировать ввод от изменений состояния кнопки в реагировать

0 голосов
/ 08 июня 2018

У меня есть простое диалоговое окно входа в систему, которое использует приставку (только диалоговое окно показано ниже для справки).Каждый раз, когда пользователь вводит символ в любое из полей ввода, изменение состояния запускается через избыточный код, и когда кнопка нажата, изменение состояния также запускается.

Я планирую изменить состояние непосредственно при нажатии кнопкибыть чем-то вроде «LoginPending», и когда вызов REST вернется, состояние изменится на «LoggedIn» или «LoginFailed».

Мой текущий план - добавить оператор if в метод MapStateToProps, который проверяетстарый статус LoginPending, чтобы увидеть, изменилось ли это, и если оно изменилось, то отправьте соответствующее действие (на самом деле я выполню тост-уведомление).

Мой вопрос таков: «Это правильный способ проверитьза что-то вроде "залогинен" "?Это кажется неловким делать это в MapStateToProps, но, поскольку происходит так много изменений состояния (из-за изменения в элементах ввода), я не могу придумать лучшего места для этого. 

class App extends Component {
  ....
  render() {
    return (
      <div className="App">
          <input onChange={this.handleChange('username')}/><br/>
          <input onChange={this.handleChange('password')}/><br/><br/>
          <button onClick={this.handleClick}>Login</button>
      </div>
    );
  }
}

1 Ответ

0 голосов
/ 08 июня 2018

Есть несколько способов сделать это.Одним из самых популярных способов является использование redux-thunk. документы и пример / официальная рекомендация

Тогда вся логика будет лежать на создателе действия: 

export const exampleAction = (username, password) => (dispatch, getState) => {
    dispatch({type: "exampleLoading"}); // the store sets a state variable so the view can render something while this "loading" state is true
    doApiCall(username,password).then(response => {
        // here the feedback message is added on the store, so my feedback manager can render the new feedback message 
        dispatch({type: "addFeedback", payload:{message:"success!", type:"success"}});
        // here the store cleans up the "loading" variable and uses the api response if needed
        dispatch({type: "exampleLoaded", payload: response}); 
    });
}
...