bmealhouse / Next Redux Saga
Licence: mit
redux-saga HOC for Next.js
Stars: ✭ 178
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Next Redux Saga
next-saga-example
Example of using next.js with redux saga
Stars: ✭ 24 (-86.52%)
Mutual labels: redux-saga, nextjs
Typescript Nextjs Redux Material Ui Example
next.js v9, typescript v3.7, redux, material-ui v4, react-hooks, redux-saga, SSR
Stars: ✭ 93 (-47.75%)
Mutual labels: nextjs, redux-saga
React Next Boilerplate
🚀 A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: ✭ 129 (-27.53%)
Mutual labels: nextjs, redux-saga
Next Apollo Auth
Authentication Boilerplate with Next.js and Apollo GraphQL
Stars: ✭ 159 (-10.67%)
Mutual labels: nextjs
Next Session
Simple promise-based session middleware for Next.js, micro, Express, and more
Stars: ✭ 161 (-9.55%)
Mutual labels: nextjs
Ran
⚡ RAN! React . GraphQL . Next.js Toolkit ⚡ - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching, CLI commands and more...
Stars: ✭ 2,128 (+1095.51%)
Mutual labels: nextjs
Actions Gh Pages
GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.
Stars: ✭ 2,576 (+1347.19%)
Mutual labels: nextjs
React Awesome Slider
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
Stars: ✭ 2,343 (+1216.29%)
Mutual labels: nextjs
Electron Next Skeleton
An example Electron app built with Next.js
Stars: ✭ 168 (-5.62%)
Mutual labels: nextjs
Gfw
Global Forest Watch: An online, global, near-real time forest monitoring tool
Stars: ✭ 167 (-6.18%)
Mutual labels: nextjs
Wipi
nextjs + nestjs + TypeScript +MySQL 开发的前后端分离,服务端渲染的博客系统
Stars: ✭ 163 (-8.43%)
Mutual labels: nextjs
Tailwind Nextjs Starter Blog
This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
Stars: ✭ 166 (-6.74%)
Mutual labels: nextjs
Next Useragent
next-useragent parses browser user-agent strings for next.js
Stars: ✭ 158 (-11.24%)
Mutual labels: nextjs
Next Secure Headers
Sets secure response headers for Next.js.
Stars: ✭ 156 (-12.36%)
Mutual labels: nextjs
Typed Redux Saga
An attempt to bring better TypeScript typing to redux-saga.
Stars: ✭ 170 (-4.49%)
Mutual labels: redux-saga
Localpdfmerger
Merge PDFs locally in the Browser using Webassembly
Stars: ✭ 163 (-8.43%)
Mutual labels: nextjs
Terraform Aws Next Js
Terraform module for building and deploying Next.js apps to AWS. Supports SSR (Lambda), Static (S3) and API (Lambda) pages.
Stars: ✭ 163 (-8.43%)
Mutual labels: nextjs
Next Netlify Blog Starter
A lightweight markdown blog starter built with Next.js 9.5+ and Netlify
Stars: ✭ 170 (-4.49%)
Mutual labels: nextjs
next-redux-saga
This project is no longer maintained!
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!
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 the Store wrapper
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
_app.js
Component
Configure Custom 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))
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
🚧 💬 | 🚧 💬 |
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
This project is licensed under the terms of MIT license. See the license file for more information.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].