Добавить логику в магазин?

Question

У меня есть приложение redux с редуктором/магазином «кампания».

В настоящее время у меня есть повторный код, чтобы проверить, загружена ли определенная кампания или требуется вызов API для извлечения данных из БД. Значительно упрощена это выглядит следующим образом:

// Reducer ---------- 
export default campaignReducer => (state, action) { 
    const campaignList = action.payload 
    return { 
     items: {... campaignList} 
    } 
} 

// Component ---------- 
const mapStateToProps = (state, ownProps) => { 
    const campaignId = ownProps.params.campaignId; 
    const campaign = state.campaign.items[campaignId] || {}; 

    return { 
     needFetch: campaign.id 
      && campaign.meta 
      && (campaign.meta.loaded || campaign.meta.loading), 
     campaign, 
    }; 
} 

export default connect(mapStateToProps)(TheComponent); 

Сейчас я не хотел бы повторить сложное условие для needFetch. Мне также не нравится иметь этот сложный код в функции mapStateToProps вообще, я хочу иметь простую проверку. Так я пришел к этому решению:

// Reducer NEW ---------- 
const needFetch = (items) => (id) => { // <-- Added this function. 
    if (!items[id]) return true; 
    if (!items[id].meta) return true; 
    if (!items[id].meta.loaded && !items[id].meta.loading) return true; 
    return false; 
} 
export default campaignReducer => (state, action) { 
    const campaignList = action.payload 
    return { 
     needFetch: needFetch(campaignList), // <-- Added public access to the new function. 
     items: {... campaignList} 
    } 
} 

// Component NEW ---------- 
const mapStateToProps = (state, ownProps) => { 
    const campaignId = ownProps.params.campaignId; 
    const campaign = state.campaign.items[campaignId] || {}; 

    return { 
     needFetch: state.campaign.needFetch(campaignId), // <-- Much simpler! 
     campaign, 
    }; 
} 

export default connect(mapStateToProps)(TheComponent); 

Вопрос: Это хорошее решение, или же перевождь-структуры ожидают различные картины, чтобы решить эту проблему?

Вопрос 2: Если мы добавим методы геттер в магазин, как store.campaign.getItem(myId) добавить санитарии (убедитесь, что MyId существует и загружен, ..) или есть другой подход, для этого в Redux?

Answer 1

Ваш подход несколько противоречит идиоматическому пониманию состояния в redux. You should keep only serializable data in the state, а не функции. В противном случае вы потеряете многие преимущества сокращения, например. что вы можете легко спрятать состояние своего приложения в локальном хранилище или убрать его с сервера, чтобы возобновить предыдущие сеансы.

---

Вместо этого я хотел бы извлечь условие в отдельный файл библиотеки и импортировать его в компонент контейнера, где необходимо:

// needsFetch.js 
export default function needsFetch(campaign) { 
    return campaign.id 
      && campaign.meta 
      && (campaign.meta.loaded || campaign.meta.loading); 
} 

---

// Component ---------- 
import needsFetch from './needsFetch'; 

const mapStateToProps = (state, ownProps) => { 
    const campaignId = ownProps.params.campaignId; 
    const campaign = state.campaign.items[campaignId] || {}; 

    return { 
     needFetch: needsFetch(campaign), 
     campaign, 
    }; 
} 

export default connect(mapStateToProps)(TheComponent); 

Answer 2

Обычно вычислительные компоненты должны отвечать за выполнение этого типа логики. Уверен, что ваша функция имеет сложную условную проверку, она находится именно в вашем вычислительном компоненте (точно так же, как и у вас в настоящее время).

Кроме того, redux предназначен только для поддержания состояния. Нет причин добавлять методы для запроса значений текущего состояния внутри ваших редукторов. Лучший способ - иметь модуль, специально предназначенный для анализа вашего состояния. Затем вы можете передать состояние модулю и извлечь соответствующую информацию. Сохраняйте код сводки/хранилища, ориентированный на вычисление только состояния.