next-redux-saga

next-redux-saga

redux-saga HOC for Next.js

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

Wrap Page Component

import React, {Component} from 'react'
import withRedux from 'next-redux-wrapper'
import withReduxSaga from 'next-redux-saga'
import configureStore from './configure-store'

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 withRedux(configureStore, state => state)(
  withReduxSaga(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

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