是否以正确的方式使用回调从 redux saga 更新组件状态答案

【问题标题】：Is using callback for component state update from redux saga the right way是否以正确的方式使用回调从 redux saga 更新组件状态
【发布时间】：2019-07-06 04:42:48
【问题描述】：

如何根据 API 响应更好地更新视图。假设我们有一个设置，当成功登录时，用户应该被重定向到仪表板视图，并且在登录屏幕上显示任何错误的警报消息。

我目前使用的

我习惯于调用动作创建者最终到达端点以获得响应。并根据该响应发送相关的成功或失败 action 以更新我使用 connect(mapStateToProps, mapActionsToProps) 在组件中订阅的全局状态。

问题

假设我的全局状态中有一个loginSuccess，我用它在我的登录组件中进行重定向或错误处理。例如，我还想处理密码重置屏幕的响应。所以我在我的全局状态中存储了另一个信息并在相关组件中使用它。

这还有问题吗？

我觉得在全局状态下存储的信息太多了。

我读到了什么新东西？

所以我开始阅读有关将callback 传递给处理响应的动作创建者的信息。这样，错误处理逻辑就保留在组件本地。

示例

Login.js

componentDidMount(){
 this.props.login({
        data, // login payload.
        callback: (response) => this.handleResponse(response)
 })
}

// response handler.
handleResponse = response => {
   this.setState({isError: response.isError});
}

render () {
   /* Use the this.state.isError to determine either to redirect or show error */
}

Actions.js

export const login = payload => ({
  type: ATTEMPT_LOGIN,
  payload
})

saga.js

// login handler in saga.
function* loginAttempt({payload}) {
  const {data, callback} = payload;
  try {
     const resp = yield apiCaller.call(method, url, data, headers); // utitly to fetch data and return a standard response.
     callback(resp);
  }catch(error){
     callback(DEFAULT_ERROR_RESPONSE); // {isError: true, message: 'Something went wrong'}
  }
}

哪个更好？

有没有更好的方法来处理这类事情？大家是怎么处理的呢？

【问题讨论】：

标签： reactjs react-redux redux-saga

【解决方案1】：

所谓的“全局”状态是 Redux 为拥有一个单独的 store 而做出的设计决定。可以根据需要向商店添加任意数量的 loginSuccess 属性。为了让它们井井有条，您可以使用combineReducers 将您的商店分成多个片。

您已经在使用 Redux 和 Redux Saga。你不应该为你的问题使用回调。让 reducers、sagas 和 selectors 处理流程：

function* loginAttempt(payload) {
  try {    
    const response = yield apiCaller.call(method, url, data, headers);
    yield put(LOGIN_SUCCESS, response);
  }catch(error){
    yield put(LOGIN_ERROR, error);
  }
}

默认状态可以是这样的：

user: null,
loginRequestStatus: {
  inProgress: false,
  error: false,
}

ATTEMPT_LOGIN 的 reducer 应该正在设置它。 LOGIN_SUCCESS 的减速器应该设置用户。 LOGIN_ERROR 设置错误。使您的组件可以使用像 selectAuthUser 和 selectIsLoginInProgress 这样的选择器。如果您使用的是可以与 Redux 通信的路由器，例如 router5，您甚至可以从 Saga 重定向。

【讨论】：