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.

    Install

    npm i next-redux-saga

    DownloadsWeekly Downloads

    10,761

    Version

    4.1.2

    License

    MIT

    Unpacked Size

    27.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • bmealhouse