Because next.js
has grown massively and other packages with better support have covered the redux-saga
SSR functionality.
See #79 for more information.
redux-saga
HOC for Next.js. controlledredux-saga
execution for server side rendering.
Attention: Synchronous HOC is no longer supported since version 4.0.0!
yarn add next-redux-saga
Check out the official Next.js example or clone this repository and run the local example.
- Clone this repository
- Install dependencies:
yarn
- Start the project:
yarn start
- Open http://localhost:3000
next-redux-saga
uses the redux store created by next-redux-wrapper. Please refer to their documentation for more information.
import {applyMiddleware, createStore} from 'redux'
import createSagaMiddleware from 'redux-saga'
import {createWrapper} from 'next-redux-wrapper'
import rootReducer from './root-reducer'
import rootSaga from './root-saga'
const makeStore = context => {
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
rootReducer,
applyMiddleware(sagaMiddleware),
)
store.sagaTask = sagaMiddleware.run(rootSaga)
return store
}
const wrapper = createWrapper(makeStore)
export default wrapper
import React from 'react'
import App from 'next/app'
import withReduxSaga from 'next-redux-saga'
import wrapper from './store-wrapper'
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} = this.props
return (
<Component {...pageProps} />
)
}
}
export default wrapper.withRedux(withReduxSaga(ExampleApp))
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)
Brent Mealhouse ๐ป | Timon Borter ๐ป | Artem Abzanov ๐ป | Robbin Habermehl ๐ป |
- 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
This project is licensed under the terms of MIT license. See the license file for more information.