Switch to Redux Toolkit and ducks pattern #2812

julienben · 2019-11-21T09:50:10Z

React Boilerplate

This is a draft PR which aggregates all the changes as we work towards switching to Redux Toolkit and the ducks pattern.

Related issue:

Switch Redux logic setup to use Redux Toolkit (take 2) #2806

Changes so far

Added Redux Toolkit (RTK)
Removed the explicit dependency on Redux, since RTK re-exports everything.
Converted the store setup logic in configureStore.js to use RTK's configureStore method
Updated the sample and template apps:
- Created an RTK "slice" for all the HomePage and LocaleToggle features
- Moved App container's reducer/saga/actions into a new container called ReposManager
- Deleted all redundant actions/constants/reducer files
- Determined ownership of repos in saga so that RepoListItem can become a component
- Updated all broken tests and write new tests for slices
Added ESLint exception for "slice" files so that we can remove ESLint exceptions
Removed obsolete store setup tests that checked for calling the DevTools Extension global API

To Do

Obsolete actions/reducers/constants files need to be deleted along with their tests (Feature/add redux toolkit #2807/Add Redux Toolkit and ducks pattern #2808)
appSlices need to be tested (Feature/add redux toolkit #2807/Add Redux Toolkit and ducks pattern #2808)
Update the template app (Feature/add redux toolkit #2807/Add Redux Toolkit and ducks pattern #2808)
Update Container generator ([REDUX TOOLKIT] Update generators #2811)
Restore 100% coverage ([REDUX TOOLKIT] Update tests #2814)
Update documentation with references to the Redux Toolkit usage guide
Consider if we can actually remove reselect and/or immer as dependencies.
Implement the reselect recommendations in this comment.

- Merged App and HomePage slices - RepoListItem becomes a component since we determine ownership of repo in the saga - Delete all useless actions/constants/reducer files - Update all broken tests - Add ESLint exception for reducer files

- Add tests to improve coverage

coveralls · 2019-11-21T09:55:56Z

Coverage remained the same at 100.0% when pulling c252e9d on redux-toolkit-switch into cb0da03 on dev.

* Update generators for switch to Redux Toolkit * Remove useless comments from tests * Turn multiline comment into many single line comments ;)

…nents (#2814)

# Conflicts: # app/containers/App/index.js # app/containers/LanguageProvider/reducer.js # app/containers/LocaleToggle/index.js # internals/templates/containers/LanguageProvider/reducer.js # package.json

# Conflicts: # app/containers/App/selectors.js # package.json

Can-Sahin · 2020-04-01T13:29:18Z

Here I don't understand why there is a ReposManager. I am pretty familiar with RTK now and with ducks pattern too. Only Homepage is using ReposManager so it can be easily its own slice. No other component is using it. I am super against to using managers. I am backend developer and it's a really bad pattern to start calling things managers and putting them into separate folders. People walked away from it years ago

afcjunior · 2020-05-15T10:26:55Z

app/containers/ReposManager/slice.js

+    },
+    reposLoaded(state, action) {
+      const { repos } = action.payload;
+      state.repositories = repos;


Mutating state directly is an antipattern. You should return { ...state, repos }

RTK uses immer inside. So you can use it this way

Tommoore96 · 2020-06-16T20:06:19Z

@all-contributors please add Tommoore96 for code

allcontributors · 2020-06-16T20:06:30Z

@Tommoore96

I've put up a pull request to add @Tommoore96! 🎉

Can-Sahin · 2020-07-03T12:49:07Z

Edit: Sorry I opening this back as a result of not merging the #2935 if that means anything;)

cahna · 2020-07-12T20:16:23Z

package.json

@@ -60,6 +60,7 @@
  },
  "dependencies": {
    "@hot-loader/react-dom": "16.11.0",
+    "@reduxjs/toolkit": "1.0.4",


@reduxjs/toolkit includes redux-thunk by default. Not sure if webpack shakes-out this dependency if unused. IMO, toolkit is too opinionated (and hiding immer is too much "magic" for my taste). The ducks pattern can be implemented just as easily, and with a similar reduction in boilerplate, using a single-purpose library like redux-actions. Using redux-actions also allows easier transition to TypeScript, if desired (see typesafe-actions)

mjtechnavious · 2022-07-05T03:57:25Z

Is there a chance when this will be release?

markerikson and others added 22 commits November 21, 2019 10:46

Add Redux Toolkit

1d8b7d4

Remove explicit dependencies on packages used by RTK

1b29294

Replace references to plain Redux package

ae78600

Convert store setup to use configureStore from RTK

5c558e4

Replace references to plain Reselect library

15d390d

Add an initial app slice

3f924ef

Update other uses of app slice actions

026e7aa

Fix lint errors in appSlice

f0dd5d1

Fix mismatched argument in saga test

6ac2663

Fix incorrect preloadedState argument for configureStore

849aadc

Remove obsolete configureStore test

6dc9d93

Fix broken initial state in template store setup

54fff0b

Fix broken test

0cf7263

Use appSlice reducer in application

7c7375c

- Fix and refactor sample app:

ec1cf41

- Merged App and HomePage slices - RepoListItem becomes a component since we determine ownership of repo in the saga - Delete all useless actions/constants/reducer files - Update all broken tests - Add ESLint exception for reducer files

Group HomePage components into one subfolder for cleanliness

4ee4642

- Remove empty if from configureStore

b4bd59e

- Add tests to improve coverage

Update the LangugageProvider in sample and template apps

f50f930

Fix LocaleToggle test

241e0c6

Remove Mensae from CODEOWNERS

d3d0f3b

Rename some tests

7a7d7bd

Move repo management to ReposManager

3618574

julienben mentioned this pull request Nov 21, 2019

[REDUX TOOLKIT] Update tests #2814

Merged

julienben added 2 commits November 21, 2019 17:04

[REDUX TOOLKIT] Update generators (#2811)

4d6fd9a

* Update generators for switch to Redux Toolkit * Remove useless comments from tests * Turn multiline comment into many single line comments ;)

Fix HomePage tests after RTK update and add tests for uncovered compo…

fe41c35

…nents (#2814)

julienben mentioned this pull request Nov 21, 2019

React Boilerplate v5.0 #2815

Draft

6 tasks

Merge branch 'dev' into redux-toolkit-switch

24a8fcc

# Conflicts: # app/containers/App/index.js # app/containers/LanguageProvider/reducer.js # app/containers/LocaleToggle/index.js # internals/templates/containers/LanguageProvider/reducer.js # package.json

julienben mentioned this pull request Nov 24, 2019

Maintenance #2819

Merged

joeyparis mentioned this pull request Nov 25, 2019

Implement reselect recommendations and best practices #2823

Merged

Merge branch 'dev' into redux-toolkit-switch

c252e9d

# Conflicts: # app/containers/App/selectors.js # package.json

afcjunior reviewed May 15, 2020

View reviewed changes

pedro-victor mentioned this pull request May 25, 2020

Implement simplified selector pattern #2921

Closed

allcontributors bot mentioned this pull request Jun 16, 2020

docs: add Tommoore96 as a contributor #2926

Closed

Can-Sahin closed this Jul 3, 2020

Can-Sahin reopened this Jul 12, 2020

cahna reviewed Jul 12, 2020

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch to Redux Toolkit and ducks pattern #2812

Switch to Redux Toolkit and ducks pattern #2812

julienben commented Nov 21, 2019 •

edited

coveralls commented Nov 21, 2019 •

edited

Can-Sahin commented Apr 1, 2020

afcjunior May 15, 2020

AlexSSE May 15, 2020

Tommoore96 commented Jun 16, 2020

allcontributors bot commented Jun 16, 2020

Can-Sahin commented Jul 3, 2020 •

edited

cahna Jul 12, 2020

mjtechnavious commented Jul 5, 2022

Switch to Redux Toolkit and ducks pattern #2812

Are you sure you want to change the base?

Switch to Redux Toolkit and ducks pattern #2812

Conversation

julienben commented Nov 21, 2019 • edited

React Boilerplate

Changes so far

To Do

coveralls commented Nov 21, 2019 • edited

Can-Sahin commented Apr 1, 2020

afcjunior May 15, 2020

Choose a reason for hiding this comment

AlexSSE May 15, 2020

Choose a reason for hiding this comment

Tommoore96 commented Jun 16, 2020

allcontributors bot commented Jun 16, 2020

Can-Sahin commented Jul 3, 2020 • edited

cahna Jul 12, 2020

Choose a reason for hiding this comment

mjtechnavious commented Jul 5, 2022

julienben commented Nov 21, 2019 •

edited

coveralls commented Nov 21, 2019 •

edited

Can-Sahin commented Jul 3, 2020 •

edited