# next-redux-saga > redux-saga HOC for Next.js Latest version **4.1.2** (published 2019-11-13) · MIT license · 0 weekly downloads ## Install ```sh npm install next-redux-saga pnpm add next-redux-saga yarn add next-redux-saga bun add next-redux-saga ``` ## Health **Score 28/100 (F)** — status: abandoned. Positive: has types package; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.1.2 | | Published | 2019-11-13 | | First published | 2017-07-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | separate (@types/next-redux-saga) | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 26.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 180 | | Author | Brent Mealhouse | | Maintainers | bmealhouse | | Keywords | next, nextjs, Next.js, next-redux, next-redux-wrapper, react, react-redux, redux, redux-saga | ## Links - npm: https://www.npmjs.com/package/next-redux-saga - Repository: https://github.com/bmealhouse/next-redux-saga - Homepage: https://github.com/bmealhouse/next-redux-saga#readme - Issues: https://github.com/bmealhouse/next-redux-saga/issues - npm.io page: https://npm.io/package/next-redux-saga ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 4.1.2 (latest) — 2019-11-13 - 5.0.0-0 (beta) — 2020-09-06 - 4.1.0 — 2019-11-13 - 4.0.3 — 2019-11-13 - 4.1.1 — 2019-11-13 - 4.0.2 — 2019-05-08 - 4.0.1 — 2019-02-17 - 4.0.0 — 2019-02-13 - 3.0.0 — 2018-09-14 - 3.0.0-beta.2 — 2018-05-12 - 3.0.0-beta.1 — 2018-05-08 - 2.0.1 — 2018-01-31 - 2.0.0 — 2018-01-31 - 1.0.1 — 2017-07-12 ## README # next-redux-saga [![npm version](https://img.shields.io/npm/v/next-redux-saga.svg)](https://npmjs.org/package/next-redux-saga) [![npm downloads](https://img.shields.io/npm/dm/next-redux-saga.svg)](https://npmjs.org/package/next-redux-saga) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![Build Status](https://travis-ci.com/bmealhouse/next-redux-saga.svg?branch=master)](https://travis-ci.com/bmealhouse/next-redux-saga) [![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg)](#contributors) > redux-saga HOC for [Next.js](https://github.com/zeit/next.js/) > **Attention:** Synchronous HOC is no longer supported since version 4.0.0! ## Installation ```sh yarn add next-redux-saga ``` ## Getting Started Check out the official [Next.js example](https://github.com/zeit/next.js/tree/canary/examples/with-redux-saga) or clone this repository and run the local example. ### Try the local example 1. Clone this repository 1. Install dependencies: `yarn` 1. Start the project: `yarn start` 1. Open [http://localhost:3000](http://localhost:3000) ## Usage `next-redux-saga` uses the redux store created by [next-redux-wrapper](https://github.com/kirill-konshin/next-redux-wrapper). Please refer to their documentation for more information. ### Configure Store ```js 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 ```js 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 ( ) } } export default withRedux(configureStore)(withReduxSaga(ExampleApp)) ``` ### Connect Page Components ```js 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
{this.props.staticData}
} } 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](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device 1. Install the dependecies: `yarn` 1. Link the package to the global module directory: `yarn link` 1. Run `yarn test --watch` and start making your changes 1. 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](https://github.com/bmealhouse/next-redux-saga/blob/master/LICENSE) for more information. --- _Source: https://npm.io/package/next-redux-saga · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._