Question

我无法绕过这头。基本上，我有一个从状态

中提取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变量的两个reducers？

Answer 1

有几种选择：

创建第3个（加载状态）缩减器

创建另一个只有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}

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

将所有内容放在一个reducer中

不太好..

React Container - 从reducer访问状态

1 个答案: