Reactjs 使用回调从redux saga更新组件状态是否正确

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

我当前使用的内容

我习惯于调用action creator以最终到达端点以获得响应。并根据该响应发送相关的成功或失败

操作

，以更新我在组件中使用

连接（MapStateTrops，mapActionsToProps）订阅的全局状态

问题

假设我在全局状态下有一个

loginsucess

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

这是个问题吗？

我有一种感觉，这是太多的信息存储在全球国家

我读到了什么新内容？

因此，我开始阅读有关将

回调

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

示例

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 */
}

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

// 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'}
  }
}

Actions.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 */
}

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

// 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'}
  }
}

saga.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 */
}

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

// 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'}
  }
}

哪一个更好？

有没有更好的方法来处理这类事情？你们是如何处理的？

你们所说的“全局”状态是Redux为拥有一个单一商店而做出的设计决策。可以根据需要向存储添加任意多的

loginsucess

属性。为了让它们井然有序，你可以将你的商店分成几块

您已经在使用Redux和Redux Saga。你不应该用回调来解决你的问题。让减速器、sagas和选择器来处理流量：

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,
}

trunt\u LOGIN

的reducer应将其设置为进行中。

LOGIN\u SUCCESS

的减速器应设置用户<代码>登录错误设置错误。使用组件可以使用的选择器，如

selectAuthUser

和

selectIsLoginInProgress

。如果您使用的路由器可以与Redux通信，比如，您甚至可以从传奇中重定向