需要一个React专业来帮助我在这里。提前感谢!
我试图找到一个甜蜜点使用redux和NEXT JS,而不使设置过于复杂。
目标:利用getInitialProps(用于SSR)来分派操作(尤其是涉及API请求的操作),以便预加载数据并对数据进行SSR。
为了实现这一点,我做了以下设置:
_应用程序组件:
// to connect redux with react
import { Provider } from 'react-redux';
import { createWrapper } from 'next-redux-wrapper';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
// REDUCER
import reducers from '../redux/reducers';
// STORE
const store = createStore(reducers, applyMiddleware(thunk));
const AppComponent = ({ Component, pageProps }) => {
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
)
}
AppComponent.getInitialProps = async (appContext) => {
let pageProps = {};
if (appContext.Component.getInitialProps) {
pageProps = await appContext.Component.getInitialProps(appContext.ctx);
};
return { ...pageProps }
}
// returns a new instance of store everytime its called
const makeStore = () => store;
const wrapper = createWrapper(makeStore);
export default wrapper.withRedux(AppComponent);
登录页面(页面/index. js):
import { connect } from 'react-redux';
import { fetchPosts } from '../redux/actions';
import { bindActionCreators } from 'redux';
import { useEffect } from 'react';
import Link from 'next/link';
const LandingPage = ({ posts }) => {
console.log('POSTS', posts); // <-- NOT getting posts for some reason via GIPs() !!!
return <h1>Home page</h1>
}
LandingPage.getInitialProps = async (ctx, { store }) => {
await store.dispatch(fetchPosts());
const posts = await store.getState().posts;
console.log('RETURNING POSTS', posts) // <-- this returns the list of posts
return { ...posts }
}
export default LandingPage;
操作:
// custom axios function
import api from '../../api';
export const fetchPosts = () => async (dispatch) => {
const response = await api.get('/posts');
dispatch({
type: 'FETCH_POSTS',
payload: response.data
});
};
问题:事件虽然getInitialProps()是POSTS列表中的控制台日志,但我无法将POSTS从getInitialProps检索到LandingPage组件。当我控制台记录帖子或属性时,它显示未定义。
有没有更好的方法?我错过了什么?
2条答案
按热度按时间shstlldc1#
从
getInitialProps
返回的对象将被合并到组件的props
中。因此,您可能需要删除LandingPage
和AppComponent
getInitialProps
函数中的反结构化操作符:kuuvgm7e2#
2022答案(使用TypeScript):
要使用TypeScript + Redux(从
App.tsx
开始,使其在所有页面上可用)实现此目的,语法应类似于:请注意,目前在Next.js中,
App
目前不支持getStaticProps
或getServerSideProps
等Next.js数据提取方法。customWrapper
来自以下配置:https://blog.logrocket.com/use-redux-next-js/