正在使用回调从 redux saga 更新组件状态的正确方法

Question

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

我现在用的是什么

我习惯于调用动作创建者来最终到达端点以获得响应。并根据该响应调度相关的成功或失败

action

来更新我使用

connect(mapStateToProps, mapActionsToProps)

在组件中订阅的全局状态。

问题

假设我的全局状态中有一个

loginSuccess

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

这还有问题吗？

我有一种感觉，在全局状态中存储的信息太多了。

我读到了什么新内容？

所以我开始阅读有关将

callback

传递给处理响应的动作创建者的内容。这样，错误处理逻辑就保留在组件本地。

示例

登录.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 Saga。对于像您的问题这样的问题，您不应该使用回调。让减速器、saga 和选择器处理流程：

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

，您甚至可以从 Saga 进行重定向。

Answer 2

假设您想要调度一个像 FETCH_DATA 这样的操作。在获取相应的 API 调用后，您想要调用一个函数来在组件中执行一些操作，例如弹出一个 toast 来通知用户。 在这种情况下，我认为您需要在 API 调用之后立即调用回调。显然，您不想在存储中设置某些内容并在其更改上设置 useEffect 来在该 useEffect 中执行操作。你是吗？