NextJS with easy-peasy example

Hi folks,

First of all: thank you so much for this awesome library! 🥇

I’m trying to use EP in a new project where I started using NextJS. I made some research and found interesting post on this github (mostly the issue #171) and on the web, but it seems all the examples I could find were outdated (compared to the current nextjs and redux-wrapper versions & guidelines).

I started from this repo: https://github.com/vercel/next.js/tree/canary/examples/with-redux-wrapper

I simplified the examples and integrated EP to end up with: https://codesandbox.io/s/next-redux-wrapper-easy-peasy-98nr6?file=/store/store.js

I would really appreciate if you (@ctrlplusb) or any skillful person over here could review this sandbox and give some feedbacks, especially on the following files and their comments:

// store/store.js

import { createStore, action, actionOn } from 'easy-peasy'
import { HYDRATE, createWrapper } from 'next-redux-wrapper'

const model = {
    count: 0,
    addCount: action((state) => {
        state.count += 1
    }),
    initCount: action((state, init) => {
        state.count = init
    }),
    // 👇 catch the HYDRATE actions (__NEXT_REDUX_WRAPPER_HYDRATE__)
    //
    // How would you do if you have a nested model ?
    // e.g.: const model = { counter: { count: 0, addCount: ... }, user: { name, getName: ... }) }
    //
    // TODO: client side state reconciliation during hydration
    // --> https://github.com/kirill-konshin/next-redux-wrapper#state-reconciliation-during-hydration
    ssrHydrate: actionOn(
        () => HYDRATE,
        (state, target) => {
            state.count = target.payload.count
        }
    )
}

const initStore = () => { return createStore(model) }

export const wrapper = createWrapper(initStore)

// pages/_app.js

import { wrapper } from '../store/store'
import { useStore } from 'react-redux'
import { StoreProvider } from 'easy-peasy'

const WrappedApp = ({ Component, pageProps }) => {
    const store = useStore()

    return (
        <StoreProvider store={store}>
            <Component {...pageProps} />
        </StoreProvider>
    )
}

export default wrapper.withRedux(WrappedApp)

// pages/other.js

import Page from '../components/Page'
import { wrapper } from '../store/store'

const Other = (props) => {
    return <Page title="Other Page" linkTo="/" />
}

// 👇 simulate data fetching to hydrate store
export const getServerSideProps = wrapper.getServerSideProps(
    ({ store }) => {
        console.log('ssr init count to 8')
        // 👇 is there a way to dispatch EP-style ? (eg: actions.initCount(8))
        store.dispatch({ type: '@action.initCount', payload: 8 })
    }
)

export default Other

As I don’t fully grasp all the things happening behind the scene, I want to make sure I’m not going crazy and wrong stuff ;D

On top of that, it could be the start of a nice example to help other people. I will certainly make a TS version when everything is validated 😃

Cheers !

Benjamin

[binajmen]

This is very strange… The buttons are in fact working. If you

1. Visit /ssr
2. Click on the Add to basket button n times for a product
3. Visit /ssr again
4. Click on the Add to basket button m times for the same product
5. Refresh the page OR Visit /index

You will notice that your basket has n + m products. I can’t find why this is happening…

@ctrlplusb You are probably busy on other stuffs, but perhaps your knowledge of Easy-Peasy and Redux in general could point out the issue?

[ctrlplusb]

Great to see this evolving @binajmen. I am in the middle of a few other things EP related, but this is on my radar. 🙏