0

Доброго времени суток.

У меня вопрос по правильной организации кода.

Задача такая. Получить данных по API, модифицировать (добавить флаги) записать их в хранилище и после чего их использовать.

Стек что использую: React Js, Redux, ts.

Т.к. страниц на сайте не будет, данные подтягивать нужно будет сразу с API. Правильно ли я сделаю, что обращение к API у меня будет не в компоненте, а напрямую из редюсера redux ? Если да, то как сделать так, чтобы обращение сработало сразу при старте redux? В какой момент делать обращение к API?

Пример кода редюсера:

import {ActionCreator, Reducer} from "redux";

export type RootState = {
    posts: object
}

const initialState = {
    posts: []
}

const POSTS = 'ANIME_POSTS'

type UpdateAnimePosts = {
    type: typeof POSTS
    posts: object
}

export const updatePosts: ActionCreator<UpdatePosts> = (posts) => ({
    type: POSTS,
    posts
})


export const rootReducer: Reducer<RootState> = (state = initialState, action) => {
    switch (action.type) {
        case POSTS:
            return {
                ...state,
                posts: action.posts
            }
        default:
            return state
    }
}

1 ответ 1

1

Не совсем понятно утверждение "страниц на сайте не будет". Использование React.js подразумевает выполнение javascript кода в браузере пользователя, который перешел на ваш сайт.

Когда пользователь переходит на ваш сайт, react.js должен отобразить какую-то разметку, в терминах реакта - компонент. При взаимодействии с какой-либо кнопкой или при маунте компонента должен выполниться запрос к вашему API.

При получении респонса должен быть задиспатчен экшен updatePosts, в payload к которому вы передадите данные из респонса. Редьюсер, получив ваш экшен в соответствующем кейсе, может полученный action.payload необходимым образом видоизменить и записать в state.

Далее необходимо создать селектор, отдающий данные из state, которые с помощью useSelector будут получены в компоненте, в котором их необходимо отобразить.

Обобщая, организация потока данных выглядит так: открылась страница -> сделали запрос к API -> после получения респонса задиспатчили экшен -> редьюсер получил экшен с данными и положил их в стор -> страница с помощью useSelector получила новые данные из стора.

4
  • Спасибо за ответ. Картина сложилась. Но у меня остался вопрос, извините заранее если он глупый. >> сделали запрос к API. >> При взаимодействии с какой-либо кнопкой или при маунте компонента должен выполниться запрос к вашему API. Получается, КОМПАНЕНТ должен сделать запрос и задиспачить экшен? 4 мар 2022 в 10:47
  • 1
    Да. Внутри компонента вы можете описать хук useEffect(() => { doRequest().then((res) => dispatch(myAction(res))) }, []); таким образом при маунте компонента будет сделан запрос и вызван экшен с данными из респонса. 4 мар 2022 в 11:02
  • У меня возник вопрос. В какой момент можно будет модифицировать полученные данные? Считается ли хорошим тоном модифицировать данные в редюсире? Или в стор должны попасть сразу модифицированные данные (модифицировать сразу после получения в компоненте) ? 4 мар 2022 в 13:44
  • 1
    Модифицировать данные полученные от вашего API нужно в редьюсере. Процесс приведения данных полученных от API к тому виду, в котором ими удобно пользоваться в рамках сущностей frontend приложения, называется нормализацией. Так же добавлять какие-то флаги/дополнительные поля так же нужно в редьюсере. 4 мар 2022 в 16:32

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.