主页 / 问题 / 1157315
Accepted
Артур Франк
Asked:2020-07-26 03:48:41 +0000 UTC2020-07-26 03:48:41 +0000 UTC

Next Redux 从 _app.js 指定 store 值

  • 772

再会！

我正在使用 Redux 编写 Next.js 应用程序。问题是当我打开一个站点时，我会从另一个站点获取一些数据。在打开页面之前，我需要处理这些数据并将其分配给商店。我去的 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 存储中。

我在初始化期间设法分配了数据，但是下次我拥有这些数据时，我不再拥有它并且它们被重置。

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

我将不胜感激您的帮助！

reactjs

1 个回答

  1. Best Answer

    用于initialState在 Redux stor 初始化时需要立即开始加载数据的特定 reducer：

    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>
   )
}
    • 1

相关问题