Skip to content
redux-saga HOC for Next.js
JavaScript
Branch: master
Clone or download
Latest commit 4a4c87c Aug 6, 2019

README.md

next-redux-saga

npm version npm downloads XO code style styled with prettier Build Status All Contributors

redux-saga HOC for Next.js

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 Store

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

function configureStore(preloadedState) {

  /**
   * Recreate the stdChannel (saga middleware) with every context.
   */

  const sagaMiddleware = createSagaMiddleware()

  /**
   * Since Next.js does server-side rendering, you are REQUIRED to pass
   * `preloadedState` when creating the store.
   */

  const store = createStore(
    rootReducer,
    preloadedState,
    applyMiddleware(sagaMiddleware)
  )

  /**
   * next-redux-saga depends on `sagaTask` being attached to the store.
   * It is used to await the rootSaga task before sending results to the client.
   */

  store.sagaTask = sagaMiddleware.run(rootSaga)

  return store
}

export default configureStore

Configure Custom _app.js Component

import React from 'react'
import {Provider} from 'react-redux'
import App, {Container} from 'next/app'
import withRedux from 'next-redux-wrapper'
import withReduxSaga 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)

Contributors

Brent Mealhouse
Brent Mealhouse

💻 ⚠️ 📖 🚧 💬
Timon Borter
Timon Borter

💻 ⚠️ 📖 🚧 💬
Artem Abzanov
Artem Abzanov

💻 ⚠️ 📖
Robbin Habermehl
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.

You can’t perform that action at this time.