juscangar12 / next-redux-observable

Redux-observable wrapper for Next.js

next-redux-observable

Library based on next-redux-wrapper to facilitate integrating redux-observable on applications based in NextJS

how to install

npm install next-redux-observable

Note: Do not forget to install and integrate next-redux-wrapper before.

motivation

As you might know getInitialProps method is called on the server side by NextJS to make sure you're providing all data needed to the server side render. next-redux-wrapper does a brilliant job connecting your NextJS app with redux providing the store on getInitialProps which then allows us to dispatch actions from it. The issue here is that we are handling all our side-effects using redux-observable which usually handles async tasks (i.e fetching data) and getInitialProps is expecting a promise to be resolved when the data is ready to be rendered. Using this library you just need to provide which actions should be processed before the rendering happen.

how to use

Assuming you have followed all the instructions to integrate next-redux-wrapper on your project and your are able to dispatch action from getInitialProps method. Using this library will be an easy task! First you need to wrap you main app component (pages/_app.js) with our withObservable HOC where you need to provide the rootEpic. Then in each page you will need to use resolveAction where you will provide the list of action needed to be resolved before the render.

Please check our example page which will help you to understand how to use it.

OR

Check this simple example where you just need to provide the "load user action". Behind the scene it will "dispatch" (execute the root epic) the action and wait to resolve the promise when the epic is finished.

// pages/_app.js

// Again here we just have the required changes needed after you followed next-redux-wrapper
// documentation to integrate it on your project
import { compose } from 'redux'
import { withObservable } from 'next-redux-observable'
import { combineEpics } from 'redux-observable'

export const rootEpic = combineEpics( /* your epics */ )

.
.
.

export default withRedux(makeStore)(withObservable(rootEpic)(MyApp))

// OR

export default compose(
    withRedux(makeStore),
    withObservable(rootEpic),
)(MyApp)

// pages/index.js

import { useEffect } from 'react'
import { connect } from 'redux-react' 
import { resolveActions } from 'next-redux-observable'
import { load } from 'YOUR_PROJECT_DIR/state/user'

const Page = ({ load, user }) => {
    return <span>User: {user}</span>
}

Page.getInitialProps = resolveActions(
    [load()],
)

const mapStateToProps = state => ({
    user: state.user.name,
})

export default connect(mapStateToProps)(Page)

interface

Syntax: resolveActions ( action | [ actions ], timeout )

Return a function expected by getInitialProps

Arguments

• actions Object | Array - an action or an array of actions
• timeout Number - (optional) timeout in ms applied to all actions (default: 15000ms )

Note: All actions will be dispatched with a isServer boolean. For example if your action is { type: 'add' } it will become { type: 'add', isServer: true } on the server side and { type: 'add', isServer: false }