Need private packages and team management tools?Check out npm Teams »

next-redux-saga

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.

Install

npm i next-redux-saga

DownloadsWeekly Downloads

14,253

Version

4.1.2

License

MIT

Unpacked Size

27.5 kB

Total Files

7

Last publish

Collaborators

  • avatar