Refactor with redux observable #13615

todortotev · 2020-05-31T16:53:23Z

Related to 11014

Moved the reducer into the store and created new store file
The example was using a server that was no longer available, now it uses JSON placeholder instead.
Moved from getInitialProps to getStaticProps
Refactored all the classes to functional components, using the new redux hooks API.
Upgraded all the packages and using custom redux wrapper instead of next-redux-wrapper, which I have removed from the example.
Upgraded all the other packages.

Please, let me know if I should change anything.

examples/with-redux-observable/lib/redux.js

examples/with-redux-observable/pages/index.js

lfades

Requested some changes, check my suggestions 🙏

ijjk · 2020-06-02T06:23:39Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
buildDuration	11.6s	11.6s	⚠️ +61ms
nodeModulesSize	65.3 MB	65.3 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.966	1.993	⚠️ +0.03
/ avg req/sec	1271.85	1254.38	-17.47
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.156	1.184	⚠️ +0.03
/error-in-render avg req/sec	2163.39	2111.68	-51.71

Client Bundles (main, webpack, commons)

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
main-HASH.module.js gzip	5.67 kB	5.67 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
index.html gzip	926 B	926 B	✓
link.html gzip	935 B	935 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
buildDuration	12.8s	12.6s	-188ms
nodeModulesSize	65.3 MB	65.3 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
main-HASH.module.js gzip	5.67 kB	5.67 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_error.js	878 kB	878 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	879 kB	879 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.5 MB	4.5 MB	✓

updated

Timer

Approving since requested changes were made, thanks!

ijjk · 2020-06-03T04:19:31Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
buildDuration	12.1s	11.4s	-687ms
nodeModulesSize	66 MB	66 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.005	2.106	⚠️ +0.1
/ avg req/sec	1246.58	1187	-59.58
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.378	1.284	-0.09
/error-in-render avg req/sec	1814.76	1947.03	⚠️ +132.27

Client Bundles (main, webpack, commons)

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
main-HASH.module.js gzip	5.67 kB	5.67 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
index.html gzip	924 B	924 B	✓
link.html gzip	934 B	934 B	✓
withRouter.html gzip	922 B	922 B	✓
Overall change	2.78 kB	2.78 kB	✓

Serverless Mode

General

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
buildDuration	12.6s	12.6s	⚠️ +31ms
nodeModulesSize	66 MB	66 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
main-HASH.module.js gzip	5.67 kB	5.67 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	vercel/next.js canary	TodorTotev/next.js refactor-redux-observable	Change
_error.js	878 kB	878 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	879 kB	879 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.5 MB	4.5 MB	✓

Related to [11014](vercel#11014) 1. Moved the reducer into the store and created new store file 2. The example was using a server that was no longer available, now it uses JSON placeholder instead. 3. Moved from getInitialProps to getStaticProps 4. Refactored all the classes to functional components, using the new redux hooks API. 5. Upgraded all the packages and using custom redux wrapper instead of next-redux-wrapper, which I have removed from the example. 6. Upgraded all the other packages. Please, let me know if I should change anything.

sinchang · 2020-07-16T02:44:54Z

@todortotev tried to run the demo on the local that failed with an error message Support for the experimental syntax 'nullishCoalescingOperator' isn't currently enabled

MagneH · 2020-09-15T11:12:56Z

#15971

leandroscls · 2021-04-01T08:56:11Z

Can someone tell me why this got merged? It is the only example which used the library which most likely one would want to use next-redux-wrapper, and most importantly the actual example now does not server side render the first call.

ubaidazad · 2021-07-28T08:35:39Z

How to handle server rendered pages, this example only demonstrates client rendering

todortotev added 16 commits May 31, 2020 19:28

Moved the reducer into the store and created new store file

b8d61ac

No longer needed

1d82ede

Refactored the _app component, no longer using next-redux-wrapper

0dc21ff

the new redux wrpaper

9d77e3e

Refactored the characterinfo component

fe5fe8c

no longer relevant

47ac8f1

changed the api route

44d3050

Renamed the component

1bfe3ab

changed the selector into a hook

98fdbb1

typo

c6f2a87

Refactored the home component

e2d6958

Update UserInfo.js

e05f252

renamed the functions

3b92c24

renamed from redux to store

65e3027

renamed the actions

89b9f91

updated all the packages

9aecb20

todortotev requested review from lfades and Timer as code owners May 31, 2020 16:53

lfades reviewed Jun 1, 2020

View reviewed changes

examples/with-redux-observable/lib/redux.js Outdated Show resolved Hide resolved

lfades reviewed Jun 1, 2020

View reviewed changes

examples/with-redux-observable/pages/index.js Outdated Show resolved Hide resolved

lfades previously requested changes Jun 1, 2020

View reviewed changes

applied requested changes

a0c41e7

todortotev requested a review from lfades June 2, 2020 06:17

Timer approved these changes Jun 3, 2020

View reviewed changes

Merge branch 'canary' into refactor-redux-observable

ccc8db4

Timer added the examples Issue was opened via the examples template. label Jun 3, 2020

Timer added this to the 9.4.5 milestone Jun 3, 2020

kodiakhq bot requested a review from chibicode as a code owner June 3, 2020 02:09

kodiakhq bot requested review from ijjk and timneutkens as code owners June 3, 2020 02:09

Merge branch 'canary' into refactor-redux-observable

176b782

kodiakhq bot merged commit 34f82a9 into vercel:canary Jun 3, 2020

leandroscls mentioned this pull request Mar 31, 2021

Redux-observable server side fetching #15971

Open

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor with redux observable #13615

Refactor with redux observable #13615

todortotev commented May 31, 2020

lfades left a comment

ijjk commented Jun 2, 2020

Timer left a comment

ijjk commented Jun 3, 2020

sinchang commented Jul 16, 2020

MagneH commented Sep 15, 2020

leandroscls commented Apr 1, 2021 •

edited

Loading

ubaidazad commented Jul 28, 2021

Refactor with redux observable #13615

Refactor with redux observable #13615

Conversation

todortotev commented May 31, 2020

lfades left a comment

Choose a reason for hiding this comment

ijjk commented Jun 2, 2020

Stats from current PR

Timer left a comment

Choose a reason for hiding this comment

ijjk commented Jun 3, 2020

Stats from current PR

sinchang commented Jul 16, 2020

MagneH commented Sep 15, 2020

leandroscls commented Apr 1, 2021 • edited Loading

ubaidazad commented Jul 28, 2021

leandroscls commented Apr 1, 2021 •

edited

Loading