next-redux-saga
redux-saga HOC for Next.js
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
- Clone this repository
- Install dependencies:
yarn
- Start the project:
yarn start
- 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'
const sagaMiddleware = createSagaMiddleware()
function configureStore(preloadedState) {
/**
* 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 `runSagaTask` and `sagaTask` being attached to the store.
*
* `runSagaTask` is used to rerun the rootSaga on the client when in sync mode (default)
* `sagaTask` is used to await the rootSaga task before sending results to the client
*
*/
store.runSagaTask = () => {
store.sagaTask = sagaMiddleware.run(rootSaga)
}
// run the rootSaga initially
store.runSagaTask()
return store
}
export default configureStore
Configure Custom App 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)
Sync vs. Async API
To be consistent with how Next.js works, next-redux-saga
defaults to sync mode in version 2.x. When you trigger a route change on the client, your browser WILL NOT navigate to the new page until getInitialProps()
has completed running all it's asynchronous tasks.
For backwards compatibility with 1.x, async mode is still supported, however it is no longer the default behavior. When you trigger a route change on the client in async mode, your browser WILL navigate to the new page immediately and continue to carry out the asynchronous tasks from getInitialProps()
. When the asynchronous tasks have completed, React will rerender the components necessary to display the async data.
// sync mode
withReduxSaga(ExamplePage)
// async mode
withReduxSaga({async: true})(ExamplePage)
Contributors
![]() |
![]() |
![]() |
---|---|---|
Brent Mealhouse | Artem Abzanov | Robbin Habermehl |
Contributing
- Fork this repository to your own GitHub account and then clone it to your local device
- Install the dependecies:
yarn
- Link the package to the global module directory:
yarn link
- Run
yarn test --watch
and start making your changes - You can use
yarn link next-redux-saga
to test your changes in an actual project
LICENSE
MIT