next-redux-saga

next-redux-saga

This project is no longer maintained!

Because next.js has grown massively and other packages with better support have covered the redux-saga SSR functionality. See #79 for more information.

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

1. Clone this repository
2. Install dependencies: yarn
3. Start the project: yarn start
4. 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

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

LICENSE

This project is licensed under the terms of MIT license. See the license file for more information.