next-redux-saga

redux-saga HOC for Next.js

⚠️ This will work only with NextJS 6+ ⚠️

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 Store

import {createStore, applyMiddleware} from 'redux'
import createSagaMiddleware from 'redux-saga'
import rootReducer from './root-reducer'
import rootSaga from './root-saga'

const sagaMiddleware = createSagaMiddleware()

function configureStore(initialState) {
  const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(sagaMiddleware)
  )

  /**
   * next-redux-saga depends on `runSagaTask` and `sagaTask` being attached to the store.
   *
   *   `runSagaTask` is used to rerun the rootSaga on the client when in sync mode (default)
   *   `sagaTask` is used to await the rootSaga task before sending results to the client
   *
   */

  store.runSagaTask = () => {
    store.sagaTask = sagaMiddleware.run(rootSaga)
  }

  // run the rootSaga initially
  store.runSagaTask()
  return store
}

export default configureStore

Configure Custom App Component

import React from 'react'
import App, {Container} from 'next/app'
import {Provider} from 'react-redux'
import withRedux from 'next-redux-wrapper'
import nextReduxSaga from 'next-redux-saga'
import configureStore from './configure-store'

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, store} = this.props
    return (
      <Container>
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
      </Container>
    )
  }
}

export default withRedux(configureStore)(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)

Sync vs. Async API

To be consistent with how Next.js works, next-redux-saga defaults to sync mode in version 2.x. When you trigger a route change on the client, your browser WILL NOT navigate to the new page until getInitialProps() has completed running all it's asynchronous tasks.

For backwards compatibility with 1.x, async mode is still supported, however it is no longer the default behavior. When you trigger a route change on the client in async mode, your browser WILL navigate to the new page immediately and continue to carry out the asynchronous tasks from getInitialProps(). When the asynchronous tasks have completed, React will rerender the components necessary to display the async data.

// sync mode
withReduxSaga(ExamplePage)

// async mode
withReduxSaga({async: true})(ExamplePage)

Contributors

Brent Mealhouse	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

MIT