TransWikia.com

Next Redux Указать значение store из _app.js

Stack Overflow на русском Asked on August 8, 2020

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

Пишу приложение на 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>
        )

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

One Answer

Используйте 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>
   )
}

Answered by Vasily on August 8, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP