reselect, Где я могу вычислить логику вычислений?

Question

Недавно я начал изучать reselect и попытался использовать его в своем проекте.

Но, я сомневаюсь, где я должен поместить код, который вычисляет выводимые данные.

Ниже мой фрагмент кода, я думаю, что я поставил formatDatecalcDayLeftFromNowsetDeriveData логики к моей reducer также будет хорошо.

Я получаю данные, вычисляемые в моем reducer также будут в порядке.

Если я это сделаю, кажется, нет причин использовать reselect.

Спасибо за ваш ответ!

function formatDate(millisecond) { 
    let d = new Date(millisecond) 
    let dateArr = [d.getFullYear(), d.getMonth() + 1, d.getDate()]; 
    let date = dateArr.join('.'); 
    return date; 
} 

function calcDayLeftFromNow(endTimeNum) { 
    const timeDiff = endTimeNum - new Date().getTime(); 
    const daysDiff = Math.ceil(timeDiff/(1000 * 3600 * 24)); 
    return daysDiff; 
} 

function setDeriveData(coupons) { 
    return Object.values(coupons).map((coupon, index) => { 
     coupon.startDate = formatDate(coupon.startTimeNum); 
     coupon.endDate = formatDate(coupon.endTimeNum); 
     coupon.dayLeft = calcDayLeftFromNow(coupon.endTimeNum); 
     return coupon; 
    }); 
} 

const mapStateToProps = (state) => { 
    const {coupons, current_tab, result, page} = state.yao_coupon; 
    const newCoupons = setDeriveData(coupons); 

    return { 
     coupons: newCoupons, 
     current_tab, 
     result, 
     page 
    }; 
}; 

Answer 1

Обычно используется код вашего селектора в вашем container component. Или, если вы не хотите разделить container from presentational, просто поместите его в свой компонент.

Роль селекторов заключается в вычислить полученные данные из состояния (магазина).

В то время как редукторы определяют, как изменяется состояние приложения в ответ на действие.

Таким образом, они служат для разных целей в вашем приложении.

В Reselect readme они помещают все в один файл, чтобы продемонстрировать его использование самым простым способом.

Вот общая структура папок, которые могут помочь вам разобраться в этом:

| reducers #folder 
    date.js 
| components #folder 
    | Clock #folder 
    ClockContainer.js #contains mapStateToProps (and your selectors) and mapDispatchToProps 
    Clock.js #the clock component 

Some people выбрать поставить селекторы в отдельном файле. Но решать вам решать. Например, вы можете поместить свой селектор в свой компонент контейнера и только переместить его в отдельный файл, если он станет большим. Другая причина переместить его в отдельный файл - в том случае, если вам нужен тот же самый селектор во всех частях приложения. (Кредиты: @kwelch)

Редактировать

, когда я получить данные Booklist с сервера, я вычисляю derivedPrice в моем FETCH_SUCCESS редуктор

Расчет производной цены в вашем редукторе сделает он сильно связан с вызовом api, и вы не сможете использовать отправленное действие в другом месте. Мое предложение состоит в том, чтобы переместить этот расчет из редуктора и рассчитать derivedPrice перед отправкой действия.