├── .gitignore
├── README.md
├── lib
    └── with-redux-store.js
├── package.json
├── pages
    ├── _app.js
    └── index.js
├── public
    ├── favicon.ico
    └── zeit.svg
├── store
    ├── count
    │   └── countSlice.js
    ├── reducers.js
    └── store.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | .env*
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | # Next.js with Redux toolkit example
 4 | 
 5 | Official Link
 6 | - [Next.js](https://nextjs.org/)
 7 | - [Redux Toolkit](https://redux-toolkit.js.org/)
 8 | 
 9 | ## How to use
10 | Download the example and Extract
11 | ```
12 | cd next-with-redux-toolkit
13 | ```
14 | 
15 | Install it
16 | 
17 | ```
18 | npm install 
19 | # or
20 | yarn install
21 | ```
22 | 
23 | Run it
24 | ```
25 | npm run dev
26 | # or
27 | yarn run dev
28 | ```
29 | 


--------------------------------------------------------------------------------
/lib/with-redux-store.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {initializeStore} from '../store/store'
 3 | 
 4 | const isServer = typeof window === 'undefined'
 5 | const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__'
 6 | 
 7 | function getOrCreateStore(initialState) {
 8 |   // Always make a new store if server, otherwise state is shared between requests
 9 |   if (isServer) {
10 |     return initializeStore(initialState)
11 |   }
12 | 
13 |   // Create store if unavailable on the client and set it on the window object
14 |   if (!window[__NEXT_REDUX_STORE__]) {
15 |     window[__NEXT_REDUX_STORE__] = initializeStore(initialState)
16 |   }
17 |   return window[__NEXT_REDUX_STORE__]
18 | }
19 | 
20 | export default App => {
21 |   return class AppWithRedux extends React.Component {
22 |     static async getInitialProps(appContext) {
23 |       // Get or Create the store with `undefined` as initialState
24 |       // This allows you to set a custom default initialState
25 |       const reduxStore = getOrCreateStore()
26 | 
27 |       // Provide the store to getInitialProps of pages
28 |       appContext.ctx.reduxStore = reduxStore
29 | 
30 |       let appProps = {}
31 |       if (typeof App.getInitialProps === 'function') {
32 |         appProps = await App.getInitialProps(appContext)
33 |       }
34 | 
35 |       return {
36 |         ...appProps,
37 |         initialReduxState: reduxStore.getState(),
38 |       }
39 |     }
40 | 
41 |     constructor(props) {
42 |       super(props)
43 |       this.reduxStore = getOrCreateStore(props.initialReduxState)
44 |     }
45 | 
46 |     render() {
47 |       return <App {...this.props} reduxStore={this.reduxStore} />
48 |     }
49 |   }
50 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-with-redux-toolkit",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "@reduxjs/toolkit": "^1.2.5",
12 |     "next": "9.3.2",
13 |     "react": "16.13.1",
14 |     "react-dom": "16.13.1",
15 |     "react-redux": "^7.2.0",
16 |     "redux": "^4.0.5"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import { Provider } from 'react-redux';
 2 | import { store } from '../store/store';
 3 | 
 4 | function MyApp({ Component, pageProps }) {
 5 |   return (
 6 |     <Provider store={store}>
 7 |       <Component {...pageProps} />
 8 |     </Provider>
 9 |   )
10 | }
11 | 
12 | export default MyApp;


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { increment, decrement } from '../store/count/countSlice'
 3 | import { useDispatch, useSelector } from 'react-redux'
 4 | 
 5 | export default function Home() {
 6 |   const dispatch = useDispatch();
 7 |   const { count } = useSelector(state => state.count);
 8 |   return (
 9 |     <div>
10 |       <h1>Simple implement Next.js With Redux Toolkit</h1>
11 |       <h2>Counted: {count}</h2>
12 |       <hr />
13 |       <button onClick={() => dispatch(increment())}>Increment</button>
14 |       &nbsp;
15 |       <button onClick={() => dispatch(decrement())}>decrement</button>
16 |     </div>
17 |   )
18 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dananw/next-with-redux-toolkit/8d79d29da13c9357db1c84a1e091fcf5c54ae713/public/favicon.ico


--------------------------------------------------------------------------------
/public/zeit.svg:
--------------------------------------------------------------------------------
 1 | <svg width="82" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <path fill="url(#prefix__paint0_linear)" d="M9.018 0l9.019 16H0L9.018 0z"/>
 3 |     <path fill="#333" fill-rule="evenodd" d="M51.634 12.028h-6.492V2.052h6.492v1.256H46.61v3.007h4.37V7.57h-4.37v3.202h5.024v1.255zm-14.063 0h-7.235v-1.096l5.342-7.624h-5.253V2.052h7.058v1.097l-5.342 7.623h5.43v1.256zm21.88 0h6.333v-1.256h-2.423V3.308h2.423V2.052h-6.332v1.256h2.441v7.465h-2.441v1.255zm18.22 0h-1.468v-8.72h-3.36V2.052h8.225v1.256H77.67v8.72z" clip-rule="evenodd"/>
 4 |     <defs>
 5 |         <linearGradient id="prefix__paint0_linear" x1="28.022" x2="16.189" y1="22.991" y2="8.569" gradientUnits="userSpaceOnUse">
 6 |             <stop stop-color="#fff"/>
 7 |             <stop offset="1"/>
 8 |         </linearGradient>
 9 |     </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/store/count/countSlice.js:
--------------------------------------------------------------------------------
 1 | import {createSlice} from '@reduxjs/toolkit'
 2 | 
 3 | let initialState = {
 4 |   count: 0,
 5 | }
 6 | 
 7 | const counterSlice = createSlice({
 8 |   name: 'counter',
 9 |   initialState,
10 |   reducers: {
11 |     increment(state, action) {
12 |       state.count += 1
13 |     },
14 |     decrement(state, action) {
15 |       state.count -= 1
16 |     },
17 |   }
18 | })
19 | 
20 | export const { increment, decrement } = counterSlice.actions
21 | 
22 | export default counterSlice.reducer


--------------------------------------------------------------------------------
/store/reducers.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 | 
3 | import count from './count/countSlice'
4 | 
5 | const reducers = combineReducers({ 
6 |   count,
7 | })
8 | 
9 | export default reducers;


--------------------------------------------------------------------------------
/store/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit'
2 | import rootReducers from './reducers'
3 | 
4 | export const store = configureStore({
5 |   reducer: rootReducers
6 | })
7 | 


--------------------------------------------------------------------------------