Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modernizing Redux Logic with Redux Toolkit (Integrate Redux Toolkit and optimize store configuration) #5867

Merged
merged 1 commit into from
Jul 8, 2024
Merged

Modernizing Redux Logic with Redux Toolkit (Integrate Redux Toolkit and optimize store configuration) #5867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 17 additions & 6 deletions app/assets/javascripts/components/util/create_store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { createStore, applyMiddleware, compose } from 'redux';
import { configureStore } from '@reduxjs/toolkit';
import reducer from '../../reducers';
import thunk from 'redux-thunk';

export const getStore = () => {
const reactRoot = document.getElementById('react_root');
Expand Down Expand Up @@ -30,12 +29,24 @@ export const getStore = () => {
};
}

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
// Determine if mutation checks should be enabled
const enableMutationChecks = false;

const store = configureStore({
reducer,
preloadedState,
composeEnhancers(applyMiddleware(thunk))
);
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
// Temporarily disable mutation checks feature to facilitate Redux Toolkit migration.
// TODO: Gradually resolve state mutations and re-enable these checks in the future.
// Enable mutation checks when resolving or detecting these issues by setting enableMutationChecks to true.
immutableCheck: enableMutationChecks,
serializableCheck: enableMutationChecks,
}),
// Enable Redux DevTools only in development mode
devTools: process.env.NODE_ENV !== 'production'
});

return store;
};

Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"@babel/preset-react": "^7.16.7",
"@babel/register": "^7.18.9",
"@rails/ujs": "^7.0.3-1",
"@reduxjs/toolkit": "^2.2.6",
"@sentry/browser": "^6.18.1",
"@tinymce/tinymce-react": "^3.12.6",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
Expand Down
51 changes: 51 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2022,6 +2022,26 @@ __metadata:
languageName: node
linkType: hard

"@reduxjs/toolkit@npm:^2.2.6":
version: 2.2.6
resolution: "@reduxjs/toolkit@npm:2.2.6"
dependencies:
immer: ^10.0.3
redux: ^5.0.1
redux-thunk: ^3.1.0
reselect: ^5.1.0
peerDependencies:
react: ^16.9.0 || ^17.0.0 || ^18
react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
peerDependenciesMeta:
react:
optional: true
react-redux:
optional: true
checksum: 9cd02df5c7f2a40ce9ea41c74a7684a9be2b4adf75c2ad897375fb64b57c039e4fa7f2b74c86588434f795f3ab90b71a14ab6768ace8fd5c6d0153a6ed93ba83
languageName: node
linkType: hard

"@sentry/browser@npm:^6.18.1":
version: 6.19.7
resolution: "@sentry/browser@npm:6.19.7"
Expand Down Expand Up @@ -2765,6 +2785,7 @@ __metadata:
"@babel/register": ^7.18.9
"@pmmmwh/react-refresh-webpack-plugin": ^0.5.7
"@rails/ujs": ^7.0.3-1
"@reduxjs/toolkit": ^2.2.6
"@sentry/browser": ^6.18.1
"@tinymce/tinymce-react": ^3.12.6
"@wojtekmaj/enzyme-adapter-react-17": ^0.6.6
Expand Down Expand Up @@ -6845,6 +6866,13 @@ __metadata:
languageName: node
linkType: hard

"immer@npm:^10.0.3":
version: 10.1.1
resolution: "immer@npm:10.1.1"
checksum: 07c67970b7d22aded73607193d84861bf786f07d47f7d7c98bb10016c7a88f6654ad78ae1e220b3c623695b133aabbf24f5eb8d9e8060cff11e89ccd81c9c10b
languageName: node
linkType: hard

"import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1":
version: 3.3.0
resolution: "import-fresh@npm:3.3.0"
Expand Down Expand Up @@ -10645,6 +10673,15 @@ __metadata:
languageName: node
linkType: hard

"redux-thunk@npm:^3.1.0":
version: 3.1.0
resolution: "redux-thunk@npm:3.1.0"
peerDependencies:
redux: ^5.0.0
checksum: bea96f8233975aad4c9f24ca1ffd08ac7ec91eaefc26e7ba9935544dc55d7f09ba2aa726676dab53dc79d0c91e8071f9729cddfea927f4c41839757d2ade0f50
languageName: node
linkType: hard

"redux@npm:^4.0.0, redux@npm:^4.0.5, redux@npm:^4.2.0":
version: 4.2.0
resolution: "redux@npm:4.2.0"
Expand All @@ -10654,6 +10691,13 @@ __metadata:
languageName: node
linkType: hard

"redux@npm:^5.0.1":
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This adds redux 5 without also removing redux 4. Is that the expected behavior for this first stage, or should we expect to only use a single version of redux.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This adds redux 5 without also removing redux 4. Is that the expected behavior for this first stage, or should we expect to only use a single version of redux.

We need to keep both versions for now.
The expected behavior when adding Redux Toolkit is indeed to have Redux 5 added without immediately removing Redux 4. However, the next step in the migration process will be to remove the direct dependency on Redux 4 (and other packages like redux-thunk and reselect) from the package.json, as they're now provided by Redux Toolkit. This should be done only after we have fully migrated to Modern Redux.

Source of Information: https://redux.js.org/tutorials/fundamentals/part-8-modern-redux#package-cleanup

version: 5.0.1
resolution: "redux@npm:5.0.1"
checksum: e74affa9009dd5d994878b9a1ce30d6569d986117175056edb003de2651c05b10fe7819d6fa94aea1a94de9a82f252f986547f007a2fbeb35c317a2e5f5ecf2c
languageName: node
linkType: hard

"regenerate-unicode-properties@npm:^10.0.1":
version: 10.0.1
resolution: "regenerate-unicode-properties@npm:10.0.1"
Expand Down Expand Up @@ -10853,6 +10897,13 @@ __metadata:
languageName: node
linkType: hard

"reselect@npm:^5.1.0":
version: 5.1.1
resolution: "reselect@npm:5.1.1"
checksum: 5d32d48be29071ddda21a775945c2210cf4ca3fccde1c4a0e1582ac3bf99c431c6c2330ef7ca34eae4c06feea617e7cb2c275c4b33ccf9a930836dfc98b49b13
languageName: node
linkType: hard

"resolve-cwd@npm:^3.0.0":
version: 3.0.0
resolution: "resolve-cwd@npm:3.0.0"
Expand Down
Loading