1

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

Пишу приложение на Next.js с использованием Redux. Проблема в том что при открытии сайта я получаю некие данные с другого сайта. Обработать эти данные и присвоить их в store мне нужно до открытия страницы. URL на который я перехожу может быть любой.

_app.js:

import App from 'next/app';
import { Provider } from 'react-redux';
import store from 'store';
import '../style/dev.css'

import MainLayout from 'layout/MainLayout';

class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props
        return (
            <Provider store={store}> // как тут инициализировать уже store с данными которые были переданы?
                <MainLayout>
                     <Component {...pageProps}/>
                </MainLayout>
            </Provider>
        )
    }
}

export default MyApp

Суть в том что данные я получаю при первом входе в приложение. Эти данные попадают в _app.js и после чего мне надо их добавить в redux store.

У меня получилось присвоить данные при инициализации НО при следующем запросе у меня этих данных больше нет и они сбрасываются.

        return (
            <Provider store={store(data)}>
                <MainLayout>
                    <Component {...pageProps} />
                </MainLayout>
            </Provider>
        )

Буду благодарен за помощь!

1 ответ 1

1

Используйте initialState для конкретно нужного Вам редюссера, что бы начать загрузку данных сразу при инициализации Redux stor'a:

const initialState = {
    data: // ... async data request
}

const yourReducer = (state = initialState, action) => // ... reducer

В компоненте подпишитесь на изменения data и отобразите страницу после того как все будет готово.


После того как Вы обновили свой вопрос:

import { Provider, useDispatch } from "react-redux"
import store from "store"
import MainLayout from "layout/MainLayout"

const App = () => {
    
    // ... ваша логика получения данных
    // (если она происходит в данном компоненте)
    
    const dispatch = useDispatch()
    
    // отправка данных в store
    // dispatch({ type: "ACTION_TYPE", payload })
    // или с привязкой к методам жизненнго цикла
    // useLayoutEffect(() => dispatch({ type: "ACTION_TYPE", payload }))    
 
    return (
       <Provider store={store}>
           <MainLayout>
               <SomeComponent />
           </MainLayout>
       </Provider>
   )
}
6
  • Понятно в initialState... но как мне правильно это сделать именно из _app.js? 26 июл 2020 в 18:53
  • Давайте я отредактирую свой вопрос 26 июл 2020 в 21:22
  • Получается мне надо поддерживать содержимое переменной initialState чтобы не обнулить те данные 26 июл 2020 в 22:12
  • Можно ли сделать конструкцию с useDispatch в class'e? 26 июл 2020 в 22:17
  • странно... дело в том что при каждой загрузке страницы у меня данные обнулялись... сейчас попробую ваш вариант с функцией а не классом... ибо таким образом <Provider store={store(data)}> при каждой отрисовке данные из data у меня меняются и stor обнуляется.... 26 июл 2020 в 22:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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