Обновление isLoading field в магазине redux

Question

У меня есть счетчик, который указывает, что мое приложение загружается. Многие редукторы в моем приложении должны иметь возможность установить этот загрузчик как true, так и false.

My Assumption: Это поле должно быть расположено на самом верхнем уровне дерева состояний. Назовем это isLoading.

Проблема: Редукторы Redux обновляют свою собственную часть дерева состояний. Каким образом я могу структурировать свои редукторы для обновления поля isLoading на самом верхнем уровне?

Я знаком с redux-thunk, но кажется, что это немного перебор, чтобы отправить событие на каждое действие. Но, возможно, я ошибаюсь, и это правильный подход. Кроме того, возможно, что я неправильно создаю свое дерево состояний.

Для справки, я в настоящее время с помощью перевождь санк как таковые:

export const fetchAssets =() => { 
    return dispatch => { 
    request 
     .get('http://myapi.com/assets') 
     .set('Accept', 'application/json') 
     .end(function(err, res){ 
     if (err) { 
      return dispatch(fetchAssetsFailure(err)); 
     } 
     dispatch(fetchAssetsSuccess(res.body.data)); 
     }); 
    } 
} 

Answer 1

Переходников получают все передаваемые действия, так что вы хотите, чтобы ваш isLoading редуктора реагировать на все соответствующие действия, а других восстановителей значения этого параметра. Очевидно, вы не можете использовать action.type, так как вы не можете предсказать все соответствующие действия, и это создаст очень громоздкий редуктор. Что вы можете сделать, это добавить еще одно поле в действие, и этот редуктор будет реагировать на это поле.

Пример действия создателя:

const createSampleAction = (payload, isLoading) => ({ 
    type: 'SAMPLE_ACTION', 
    payload, 
    meta: { 
     isLoading 
    } 
}); 

И редуктор:

const isLoadingReducer = (state = false, { meta }) => { 
    const isLoading = meta && meta.isLoading; 

    if (isLoading !== undefined) { 
     return isLoading; 
    } 

    return state; 
} 

Если вы не знакомы с редукторами, которые используют мета вместо типа действия, вы можете создайте промежуточное программное обеспечение, которое будет выполнять одно и то же свойство для отправки showLoading/hideLoading действий, и редуктор будет реагировать на эти действия:

const isLoadingMiddleware = ({ dispatch }) => next => { 
    next(action); 
    const isLoading = action.meta && action.meta.isLoading; 

    if (isLoading !== undefined) { 
     dispatch(isLoading ? showLoading() : hideLoading()); 
    } 
}