1.0.5 • Published 2 years ago
next-redux-hydrate v1.0.5
Next Redux Hydrate
A simple, lightweight library that dispatches a HYDRATE action when the app is on the client.
Motivation
I've always written my global states in Redux, I often use SocketIO for when I need a websocket connection to the server. Thus, when I switched to Next.JS there would be two connections, one for the SSR and one for the actual client. I needed a way to make sure the SocketIO connection only connects when the app is on the client. Having to write separate logic for every state and reducer is inefficient. Next-redux-wrapper provided a solution but covers too many usecases. I wanted something that would just be a hook that does its thing and then doesn't bother you.
Usage
Installation
NPM
npm install next-redux-hydrate
Yarn
yarn add next-redux-hydrate
Getting started
// _app.tsx (or .js)
// ...
import { useReduxHydrate } from "next-redux-hydrate";
// ...
// ...
const MyApp = ({ Component, pageProps }: AppProps) => {
useReduxHydrate({ store });
return (
// ...
This dispatches HYDRATE when the app is on the client.
Using in reducers
// counterSlice.ts (or .js)
// ...
import { HYDRATE } from "next-redux-hydrate";
const initialState = {
value: 1,
};
const counterSlice = createSlice({
name: "counter",
initialState,
reducers: {
// ...
},
// ...
extraReducers: {
// ...
[HYDRATE]: (state) => {
// Add 1 to the counter when the app is on the client
state.value = state.value + 1;
},
// ...
},
});
// ...
That's it!