Как в связке Redux + React.js кешировать ответы сервера и где?

Question

[Александр Антонов]

Суть такая:
Необходимо чтобы при вызове экшена проводилась проверка, присутствует ли в сторе уже нужный объект, если нет то производить загрузку с сервера.

Не очень понятно как в экшене это проверить или где это вообще нужно делать?

Подскажите, как делать правильно?

Answer 1

[Александр Антонов]

Нашел более подходящее решение для моего вопроса, через redux-thunk, который вторым аргументом в экшен передает текущее состояние стора

//redux-app/actions/LoadObject

export function LoadObject({ id }) {
    return async ( dispatch, getState ) => {
        let objectExist = getState().objects.some( _object => _object.id === id )

        if( objectExist )
        {
            dispatch({
                type: LOAD_OBJECT,
                payload: {
                    id,
                    object: objectExist
                }
            })
        } else {
            dispatch({ type: LOAD_OBJECT_BEGIN })

            let object = await ObjectApi.Load({ id })

             dispatch({
                type: LOAD_OBJECT,
                payload: {
                    id,
                    object
                }
            })
        }
    }
}

Comments

[vsuhachev]

А данные на сервере никогда не меняются видимо? Или юзер Ctrl+F5 будет нажимать постоянно?

[Александр Антонов]

vsuhachev Суть вопроса прочитайте пожалуйста. Я использовал слово "кеширование" не в прямом смысле, а в том чтобы не делать повторный запрос к серверу во время одной сессии. Кеширование данных на клиенте для меня более понятный момент. Вопрос был про то ГДЕ именно в рамках архитектуры редакса, ПРОВЕРЯТЬ то что объект УЖЕ загружен. Отвечать на заголовок не читая тело вопроса - не есть хорошо

[vsuhachev]

Неверно отвечать на свой же вопрос еще хуже

[Александр Антонов]

vsuhachev неверно критиковать что-то без аргументации и спамить тоже

Answer 2

[Aves]

Middleware написать.
Но если данные в store, не проще ли из компонента проверять их наличие и запрашивать только если их нет?

Answer 3

[Максим]

Как вам уже написал Aves в компоненте перед вызовом экшена проверяйте, если данные уже есть - не делайте запрос. Выглядеть может так:

loadData() {
  if (state.data.length) {
    // ничего не делай
  } else {
    this.props.callActionAndLoadData()
  }
}

Answer 4

[vsuhachev]

Нормально настроить HTTP-кэширование (ETag, быстрый ответ 304, keep-alive) и браузер все сам закеширует.