Background color slice using redux toolkit

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 = () => (
   <Provider store={store}>
     <Container />

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 (

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(() => {

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;

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;
+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;

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.2.8"
+  }
+}