Question

我有一个使用redux的简单登录对话框（只是对话框如下所示）。每次用户在任一输入字段中键入一个字符时，都会通过redux触发状态更改，当按下该按钮时，状态更改也会触发。

我打算在按下按钮时直接更改状态，如“LoginPending”，当REST调用返回时，状态将变为“LoggedIn”或“LoginFailed”。

我目前的计划是向MapStateToProps方法添加一个if语句，该方法检查旧的LoginPending状态以查看是否发生了更改，如果是，则调度正确的操作（实际上我将执行Toast通知消息）。

我的问题是，“这是检查”登录“之类的东西的正确方法吗？在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>
    );
  }
}

Answer 1

有几种方法可以做到这一点。最流行的方法之一是使用redux-thunk。 docs和example / official recommendation

然后所有逻辑都将驻留在动作创建者身上：

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}); 
    });
}

如何区分react redux中的输入与按钮状态变化

1 个答案: