Реагент Контейнер - состояние доступа от любого редуктора

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 - редуктор поворачивает isFetching к истине. но компонент все еще не обновляется, потому что он смотрит на переменную isFetching только из signUp Reducer.

Есть ли способ, которым я могу видеть компонент для обоих редукторов для переменной isFetching?

Answer 1

Есть несколько вариантов:

---

Создание третьей (загрузка состояния) редуктора

Создайте другой редуктор, который имеет только 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} 

Это хорошо, если запросы могут перекрываться.

---

Положите все это в одном редукторе

не так хорошо ..