正在以正确的方式从redux传奇中使用回调对组件状态更新

Question

如何根据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'}
  }
}

哪个更好？

有什么更好的方法来处理这种事情吗？你们如何处理？

Answer 1

您所说的"全局"状态是Redux为拥有一个商店做出的设计决定。可以在商店中添加尽可能多的loginSuccess属性。为了保持它们的组织，您使用combineReducers将商店分为切片。

您已经在使用Redux和Redux传奇。您不必将回调用于类似问题。让还原器，萨加斯和选择器照顾流程：

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的还原器应将其设置在进行中。LOGIN_SUCCESS的还原器应设置用户。LOGIN_ERROR设置了错误。制作组件可以使用的selectAuthUser和selectIsLoginInProgress之类的选择器。如果您使用的是可以与redux交谈的路由器，例如router5，甚至可以从传奇中重定向。