React Container-来自任一reducer的访问状态

React Container - access state from either reducer

本文关键字：访问 状态 reducer 任一 Container- React      更新时间：2023-09-26

我很难理解这一点。基本上，我有一个组件，它从状态中提取isFetching布尔值

function mapStateToProps(state){
  const {errorMessage,isFetching} = state.signUp
  const {isAuthenticated,username} = state.login;
  return {
    isAuthenticated,
    errorMessage,
    isFetching,
    username
  }
}

我有以下减速器

export const signUp = (state={},action) => {
  switch(action.type){
    case SIGNUP_REQUEST:
      return Object.assign({},state,{
        isFetching: true
      })
    case SIGNUP_FAILURE:
      return Object.assign({},state,{
        isFetching:false,
        // isAuthenticated: false,
        errorMessage: action.message
      })
    default:
      return state
  }
}
export const login = (state={isAuthenticated:false},action) => {
  switch(action.type){
    case LOGIN_REQUEST:
      return Object.assign({},state,{
        isFetching: true,
        isAuthenticated: false
      })
    case LOGIN_SUCCESS:
      return Object.assign({},state,{
        isFetching:false,
        isAuthenticated:true,
        username: action.username
      })
    case LOGIN_FAILURE:
      return Object.assign({},state,{
        isFetching: false,
        isAuthenticated: false,
        errorMessage: action.message
      })
    default:
      return state
  }
}

当我发送loginRequest时，reducer将isFetching设置为true。但是组件仍然没有更新，因为它只从signUp Reducer中查看isFetching变量。

有没有一种方法可以让组件同时查看isFetching变量的两个reducer？

有几个选项：

创建第三个（加载状态）减速器

创建另一个只有isFetching处于其状态的reducer，并侦听相同的事件。

export const loading = (state={}, action) => {
  switch(action.type) {
    case SIGNUP_REQUEST:
    case LOGIN_REQUEST:
      return Object.assign({},state,{
        isFetching: true
      })
    case SIGNUP_SUCCESS:
    case SIGNUP_FAILURE:
    case LOGIN_SUCCESS:
    case LOGIN_FAILURE:
      return Object.assign({},state,{
        isFetching: false
      })
    default:
      return state
  }
}

如果这两个请求有可能重叠，那么您可能应该有独立的isLoading变量，只使用||。

检查视图中的两个isFetching变量

{signup.isFetching || login.isFetching}

如果请求可能重叠，这是很好的。

将其全部放在一个减速器中

不太好。。

相关文章：