React Container - 从任一 reducer 访问状态

Question

我无法解决这个问题。基本上，我有一个组件从 state

中提取一个 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 变量的两个减速器？

Answer 1

有几个选项：

创建第三个（加载状态）reducer

创建另一个只有 isFetching 状态的减速器，并监听相同的事件。

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}

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

把它全部放在一个减速机里

不太好..

React Container - 从任一 reducer 访问状态

React Container - access state from either reducer

javascript

reactjs

redux

react-redux