next.js starter プロジェクトでReduxを使用しようとしましたが、next-redux-wrapper
をプロジェクトにインストールしましたが、このプロジェクトのルートファイルの場所がわかりません。
next-redux-wrapper に示されているチュートリアルを実行しようとしましたが、成功しませんでした。何も変わらない。
Reduxをプロジェクトに追加する方法を教えてください。
よろしく。
Next.jsは、Appコンポーネントを使用してページを初期化します。これをオーバーライドして、ページの初期化を制御できます。
このデモはnext.js用ですが、nextjs-starterでも機能するはずです。
next-redux-wrapperをインストールします:
npm install --save next-redux-wrapper
追加_app.js
ファイルから./pages
ディレクトリ:
// pages/_app.js
import React from "react";
import {createStore} from "redux";
import {Provider} from "react-redux";
import App, {Container} from "next/app";
import withRedux from "next-redux-wrapper";
const reducer = (state = {foo: ''}, action) => {
switch (action.type) {
case 'FOO':
return {...state, foo: action.payload};
default:
return state
}
};
/**
* @param {object} initialState
* @param {boolean} options.isServer indicates whether it is a server side or client side
* @param {Request} options.req NodeJS Request object (not set when client applies initialState from server)
* @param {Request} options.res NodeJS Request object (not set when client applies initialState from server)
* @param {boolean} options.debug User-defined debug mode param
* @param {string} options.storeKey This key will be used to preserve store in global namespace for safe HMR
*/
const makeStore = (initialState, options) => {
return createStore(reducer, initialState);
};
class MyApp extends App {
static async getInitialProps({Component, ctx}) {
// we can dispatch from here too
ctx.store.dispatch({type: 'FOO', payload: 'foo'});
const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
return {pageProps};
}
render() {
const {Component, pageProps, store} = this.props;
return (
<Container>
<Provider store={store}>
<Component {...pageProps} />
</Provider>
</Container>
);
}
}
export default withRedux(makeStore)(MyApp);
次に、実際のページコンポーネントを簡単に接続できます:このデモでは、接続方法index.js
ページ。
import Link from "next/link";
import React from "react";
import {
Container,
Row,
Col,
Button,
Jumbotron,
ListGroup,
ListGroupItem
} from "reactstrap";
import Page from "../components/page";
import Layout from "../components/layout";
import { connect } from "react-redux";
class Default extends Page {
static getInitialProps({ store, isServer, pathname, query }) {
store.dispatch({ type: "FOO", payload: "foo" }); // component will be able to read from store's state when rendered
return { custom: "custom" }; // you can pass some custom props to component from here
}
render() {
return (
<Layout>content...</Layout>
);
}
}
export default connect()(Default);
詳細については、ドキュメントを参照してください: next-redux-wrapper