next-redux-saga

redux-saga HOC for Next.js. controlled redux-saga execution for server side rendering.

Attention: Synchronous HOC is no longer supported since version 4.0.0!

Installation

yarn add next-redux-saga

Getting Started

Check out the official Next.js example or clone this repository and run the local example.

Try the local example

Clone this repository
Install dependencies: yarn
Start the project: yarn start
Open http://localhost:3000

Usage

next-redux-saga uses the redux store created by next-redux-wrapper. Please refer to their documentation for more information.

Configure the Store wrapper

import {applyMiddleware, createStore} from 'redux'
import createSagaMiddleware from 'redux-saga'
import {createWrapper} from 'next-redux-wrapper'

import rootReducer from './root-reducer'
import rootSaga from './root-saga'

const makeStore = context => {
  const sagaMiddleware = createSagaMiddleware()
  const store = createStore(
    rootReducer,
    applyMiddleware(sagaMiddleware),
  )

  store.sagaTask = sagaMiddleware.run(rootSaga)

  return store
}

const wrapper = createWrapper(makeStore)

export default wrapper

Configure Custom `_app.js` Component

import React from 'react'
import App from 'next/app'
import withReduxSaga from 'next-redux-saga'

import wrapper from './store-wrapper'

class ExampleApp extends App {
  static async getInitialProps({Component, ctx}) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return {pageProps}
  }

  render() {
    const {Component, pageProps} = this.props
    return (
      <Component {...pageProps} />
    )
  }
}

export default wrapper.withRedux(withReduxSaga(ExampleApp))

Connect Page Components

import React, {Component} from 'react'
import {connect} from 'react-redux'

class ExamplePage extends Component {
  static async getInitialProps({store}) {
    store.dispatch({type: 'SOME_ASYNC_ACTION_REQUEST'})
    return {staticData: 'Hello world!'}
  }

  render() {
    return <div>{this.props.staticData}</div>
  }
}

export default connect(state => state)(ExamplePage)

Contributors

_{Brent Mealhouse}

_{Timon Borter}

_{Artem Abzanov}

_{Robbin Habermehl}

Contributing

Fork this repository to your own GitHub account and then clone it to your local device
Install the dependecies: yarn
Link the package to the global module directory: yarn link
Run yarn test --watch and start making your changes
You can use yarn link next-redux-saga to test your changes in an actual project