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>
)
Буду благодарен за помощь!
Используйте 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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP