@next-tools/redux v0.0.5
Next js with Redux
Default and only export is a generator that you pass your client creation function into. It returns two functions that allow you to access the redux store in the context of a react component or any other context that may have to do with pre-rendering on the server or client in next js.
initRedux
- Function that takes a single optional argument which is initial state to hydrate the cache. This function can be used insidegetServerSideProps
,getStaticProps
, andgetInitialProps
.useRedux
- Hook version of initRedux. Used in a react component, typically inpages/_app.js
to supply the Redux Provider.
This uses the exact concepts from the latest next js examples git repository for using redux with next js. https://github.com/vercel/next.js/tree/canary/examples/with-redux It is packaged up for convienience so you don't have to keep having to re-writing this functionality and only worry about passing in your store creation function and using the redux.
Example Usage
create a file that you will export the two generated functions from your store creation function. example path:
~/lib/redux.js
(where ~ is project root)import { createStore } from "redux"; import nextRedux from "@next-tools/redux"; import reducer from "somewhere"; export const { initRedux, useRedux } = nextRedux(function (initState) { return createStore(reducer, initState); });
Provider in
pages/_app.js
import { useRedux } from "~/lib/redux"; import { Provider } from "react-redux"; const App = ({ Component, pageProps }) => { const reduxStore = useRedux(pageProps.initReduxState); return ( <Provider store={reduxStore}> <Component {...pageProps} /> </Provider> ); }; export default App;
Usage for ssr in any of the 3 available functions
getServerSideProps
,getStaticProps
, orgetInitialProps
on a next jspage
import { initRedux } from "~/lib/redux"; import fetchData from "fetchData"; import actions from "somewhere/actions"; const Page = ({ something }) => { return <div>...</div>; }; // connect to anything with pre-rendered state. here just showing page component for simple example export default connect(({ something }) => ({ something }), actions)(Page); Page.getInitialProps = async function () { const store = initRedux(); const data = await fetchData(); store.dispatch(actions.doSomething(data)); // only pass an init state if you are on the server // this makes sure that you don't re-create the store every client-side transition return { initReduxState: typeof window === "undefined" ? store.getState() : undefined }; };
import { initRedux } from "~/lib/redux"; import fetchData from "fetchData"; import actions from "somewhere/actions"; const Page = ({ something }) => { return <div>...</div>; }; // connect to anything with pre-rendered state. here just showing page component for simple example export default connect(({ something }) => ({ something }), actions)(Page); export async function getServerSideProps() { const store = initRedux(); const data = await fetchData(); store.dispatch(actions.doSomething(data)); return { props: { initReduxState: store.getState() } }; }
import { initRedux } from "~/lib/redux"; import fetchData from "fetchData"; import actions from "somewhere/actions"; const Page = ({ something }) => { return <div>...</div>; }; // connect to anything with pre-rendered state. here just showing page component for simple example export default connect(({ something }) => ({ something }), actions)(Page); export async function getStaticProps() { const store = initRedux(); const data = await fetchData(); store.dispatch(actions.doSomething(data)); return { props: { initReduxState: store.getState() } }; }