diff --git a/lab3/src/actions/backgroundActions.js b/lab3/src/actions/backgroundActions.js deleted file mode 100644 index 0a686dc..0000000 --- a/lab3/src/actions/backgroundActions.js +++ /dev/null @@ -1,10 +0,0 @@ -export const SET_BG_COLOR = "SET_BG_COLOR"; - -export const setBackgroundColor = (color) => { - return { - type: SET_BG_COLOR, - payload: { - color - } - }; -}; \ No newline at end of file diff --git a/lab3/src/components/App/App.jsx b/lab3/src/components/App/App.jsx index d69530c..1a1029e 100644 --- a/lab3/src/components/App/App.jsx +++ b/lab3/src/components/App/App.jsx @@ -1,13 +1,10 @@ import React from "react"; import Container from "../Container/Container"; import { Provider } from "react-redux"; -import configureStore from "../../store"; +import store from "../../store"; import "./App.css"; -const preloadedState = window.__PRELOADED_STATE__; -const store = configureStore(preloadedState); - const App = () => ( diff --git a/lab3/src/components/BackgroundColorPicker/BackgroundColorPicker.jsx b/lab3/src/components/BackgroundColorPicker/BackgroundColorPicker.jsx index fa2498d..46dbd3d 100644 --- a/lab3/src/components/BackgroundColorPicker/BackgroundColorPicker.jsx +++ b/lab3/src/components/BackgroundColorPicker/BackgroundColorPicker.jsx @@ -1,14 +1,14 @@ import React from "react"; import { useDispatch } from "react-redux"; -import { setBackgroundColor } from "../../actions/backgroundActions"; import colors from "./colors"; +import { updatedBackgroundColor } from "../../features/background/backgroundSlice"; import "./BackgroundColorPicker.css"; const BackgroundColorPicker = () => { const dispatch = useDispatch(); const handleOnChange = (e) => { - dispatch(setBackgroundColor(e.target.value)); + dispatch(updatedBackgroundColor(e.target.value)); }; return ( diff --git a/lab3/src/components/Container/Container.jsx b/lab3/src/components/Container/Container.jsx index 9a47762..7d18f03 100644 --- a/lab3/src/components/Container/Container.jsx +++ b/lab3/src/components/Container/Container.jsx @@ -3,12 +3,13 @@ import BackgroundColorPicker from "../BackgroundColorPicker/BackgroundColorPicke import List from "../List/List"; import { useDispatch, useSelector } from "react-redux"; import { getAllUsers } from "../../actions/userActions"; +import { selectBackgroundColor } from "../../features/background/backgroundSlice"; import "./Container.css"; const Container = () => { const dispatch = useDispatch(); - const backgroundColor = useSelector((state) => state.background.bgColor); + const backgroundColor = useSelector(selectBackgroundColor); // TODO: Task 5 - Get all users upon mounting the component useEffect(() => { diff --git a/lab3/src/features/background/backgroundSlice.js b/lab3/src/features/background/backgroundSlice.js new file mode 100644 index 0000000..328c4a7 --- /dev/null +++ b/lab3/src/features/background/backgroundSlice.js @@ -0,0 +1,22 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + // TODO: Task 2 + bgColor: "gold", +}; + +const backgroundSlice = createSlice({ + name: "background", + initialState, + reducers: { + updatedBackgroundColor(state, action) { + state.bgColor = action.payload; + }, + }, +}); + +export const { updatedBackgroundColor } = backgroundSlice.actions; + +export const selectBackgroundColor = (state) => state.background.bgColor; + +export default backgroundSlice.reducer; diff --git a/lab3/src/reducers/backgroundReducer.js b/lab3/src/reducers/backgroundReducer.js deleted file mode 100644 index 1e04c5b..0000000 --- a/lab3/src/reducers/backgroundReducer.js +++ /dev/null @@ -1,19 +0,0 @@ -import { SET_BG_COLOR } from "../actions/backgroundActions"; - -const initialState = { - // TODO: Task 2 - bgColor: "gold", -}; - -const backgroundReducer = (state = initialState, action = {}) => { - switch (action.type) { - case SET_BG_COLOR: - return { - bgColor: action.payload.color, - }; - default: - return state; - } -}; - -export default backgroundReducer; diff --git a/lab3/src/reducers/reducers.js b/lab3/src/reducers/reducers.js deleted file mode 100644 index 990d62d..0000000 --- a/lab3/src/reducers/reducers.js +++ /dev/null @@ -1,10 +0,0 @@ -import {combineReducers} from 'redux'; -import backgroundReducer from './backgroundReducer'; -import userReducer from './userReducer'; - -const rootReducer = combineReducers({ - background: backgroundReducer, - users: userReducer -}); - -export default rootReducer; diff --git a/lab3/src/store.js b/lab3/src/store.js index cac7260..c7e25f8 100644 --- a/lab3/src/store.js +++ b/lab3/src/store.js @@ -1,18 +1,12 @@ - -import { applyMiddleware, createStore } from "redux"; -import { composeWithDevTools } from "redux-devtools-extension"; -import logger from "redux-logger"; -import thunk from "redux-thunk"; -import rootReducer from "./reducers/reducers"; - -const configureStore = (preloadedState) => { - - const middleware = [ - thunk, - logger - ]; - - return createStore(rootReducer, preloadedState, composeWithDevTools(applyMiddleware(...middleware))); -}; - -export default configureStore; \ No newline at end of file +import { configureStore } from "@reduxjs/toolkit"; +import backgroundReducer from "./features/background/backgroundSlice"; +import userReducer from "./reducers/userReducer"; + +const store = configureStore({ + reducer: { + background: backgroundReducer, + users: userReducer, + }, +}); + +export default store; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..49da432 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,67 @@ +{ + "name": "academy-react-redux", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "@reduxjs/toolkit": "^2.2.8" + } + }, + "node_modules/@reduxjs/toolkit": { + "version": "2.2.8", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.8.tgz", + "integrity": "sha512-eK/ieXftPRQfaBSmzsamXEyDwkntMTY0e9SG5ETsEOv5JIPKhu3mj992t6B8FJjlnSrZBAAqdT8oMkPe4j+P9g==", + "license": "MIT", + "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 + } + } + }, + "node_modules/immer": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz", + "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, + "node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", + "license": "MIT" + }, + "node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "license": "MIT", + "peerDependencies": { + "redux": "^5.0.0" + } + }, + "node_modules/reselect": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", + "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==", + "license": "MIT" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..5a40ae5 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "@reduxjs/toolkit": "^2.2.8" + } +}