next-redux-saga
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/next-redux-saga package

4.1.2 • Public • Published

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, {isServer, req = null}) {
 
  /**
   * 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 during `getInitialProps`.
   * It is used to await the rootSaga task before sending results to the client.
   * However, next-redux-wrapper creates two server-side stores per request:
   * One before `getInitialProps` and one before SSR (see issue #62 for details).
   * On the server side, we run rootSaga during `getInitialProps` only:
   */
 
  if (req || !isServer) {
    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.

Dependencies (0)

    Dev Dependencies (29)

    Package Sidebar

    Install

    npm i next-redux-saga

    Weekly Downloads

    9,715

    Version

    4.1.2

    License

    MIT

    Unpacked Size

    27.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • bmealhouse