all style changed

Author: Yashgabani845

courses/react-js/advanced-level/redux-toolkit/lesson_1.md

@@ -42,8 +42,7 @@ npm install @reduxjs/toolkit react-redux
 
 Redux Toolkit provides a `configureStore` function that simplifies store creation. It includes good defaults and automatically sets up the Redux DevTools extension.
 
-```javascript
-// src/app/store.js
+```Javascript title="src/app/store.js"
 import { configureStore } from '@reduxjs/toolkit';
 import counterReducer from '../features/counter/counterSlice';
 
@@ -60,8 +59,7 @@ export default store;
 
 A slice is a collection of Redux reducer logic and actions for a single feature of your app. Redux Toolkit’s `createSlice` function automatically generates action creators and action types.
 
-```javascript
-// src/features/counter/counterSlice.js
+```javascript title = "src/app/app.js"
 import { createSlice } from '@reduxjs/toolkit';
 
 export const counterSlice = createSlice({
@@ -90,8 +88,7 @@ export default counterSlice.reducer;
 
 Now that the store and slice are set up, you can use them in your React components. Use the `useSelector` hook to read state and the `useDispatch` hook to dispatch actions.
 
-```javascript
-// src/features/counter/Counter.js
+```javascript title = "src/features/counter/counter.js
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { increment, decrement, incrementByAmount } from './counterSlice';
@@ -121,8 +118,7 @@ export default Counter;
 
 To make the Redux store available to your entire app, wrap your application in the `Provider` component from `react-redux`.
 
-```javascript
-// src/index.js
+```javascript title = "src/index.js"
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';

courses/react-js/advanced-level/redux-toolkit/lesson_2.md

@@ -25,8 +25,7 @@ Creating an API utility for your application is an essential step to manage and
 
 You'll often want to separate your API calls into a dedicated utility file. This approach allows you to centralize the logic for making HTTP requests, making your code more modular and easier to maintain. 
 
-```javascript
-// src/features/posts/postsAPI.js
+```javascript title = "src/features/posts/postsAPI.js"
 import axios from 'axios';
 
 export const fetchPosts = () => {
@@ -40,8 +39,7 @@ export const fetchPosts = () => {
 
 With the API utility created, you can now use it in your Redux slices to handle asynchronous actions. Redux Toolkit provides `createAsyncThunk` to simplify this process.
 
-```javascript
-// src/features/posts/Posts.js
+```javascript title = "src/features/posts/Posts.js"
 import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { fetchPostsAsync } from './postsSlice';
@@ -88,8 +86,7 @@ For complex applications, it's important to structure your state effectively to
 
 ### 1. Normalizing State Structure
 
-```javascript
-// src/features/entities/entitiesSlice.js
+```javascript title = "src/features/entities/entitiesSlice.js" 
 import { createSlice } from '@reduxjs/toolkit';
 
 const entitiesSlice = createSlice({
@@ -125,8 +122,7 @@ export default entitiesSlice.reducer;
 
 Redux Toolkit provides `createEntityAdapter` to manage normalized state more efficiently. It includes helpers for common operations like adding, updating, and removing entities.
 
-```javascript
-// src/features/posts/postsSlice.js
+```javascript title="src/features/posts/postsSlice.js"
 import { createSlice, createEntityAdapter } from '@reduxjs/toolkit';
 import { fetchPosts } from './postsAPI';
 

courses/react-js/advanced-level/redux-toolkit/lesson_3.md

@@ -28,8 +28,7 @@ Middleware in Redux is a powerful way to extend the functionality of the store.
 
 Redux Toolkit's `configureStore` makes it easy to add middleware to your Redux store.
 
-```javascript
-// src/app/store.js
+```javascript title="src/app/store.js"
 import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
 import counterReducer from '../features/counter/counterSlice';
 import logger from 'redux-logger';
@@ -48,8 +47,7 @@ export default store;
 
 You can write your own custom middleware to handle specific tasks. Middleware is a function that returns another function, which receives the `next` function and the `action`.
 
-```javascript
-// src/middleware/customMiddleware.js
+```javascript title="src/middleware/customMiddleware.js"
 const customMiddleware = (storeAPI) => (next) => (action) => {
   console.log('Dispatching action:', action);
   let result = next(action);
@@ -64,8 +62,7 @@ export default customMiddleware;
 
 Add the custom middleware to your Redux store using `configureStore`.
 
-```javascript
-// src/app/store.js
+```javascript title="src/app/store.js"
 import { configureStore } from '@reduxjs/toolkit';
 import counterReducer from '../features/counter/counterSlice';
 import customMiddleware from '../middleware/customMiddleware';
@@ -86,7 +83,7 @@ export default store;
 
 Sometimes you may want to reuse the same logic in different parts of your application. You can create a reusable slice that can be configured for different use cases.
 
-```javascript
+```javascript title="src/features/toggle/toggleSlice.js"
 // src/features/toggle/toggleSlice.js
 import { createSlice } from '@reduxjs/toolkit';
 
@@ -108,8 +105,7 @@ export default createToggleSlice;
 
 You can create instances of the reusable slice for different parts of your state.
 
-```javascript
-// src/features/toggle/toggleInstances.js
+```javascript title="src/fratures/toggle/toggleInstace.js"
 import createToggleSlice from './toggleSlice';
 
 export const lightSlice = createToggleSlice('light');
@@ -128,8 +124,7 @@ export default {
 
 Use Redux Toolkit's `combineReducers` to combine the reducers into a single reducer.
 
-```javascript
-// src/app/rootReducer.js
+```javascript title = "src/app/rootReducer.js"
 import { combineReducers } from '@reduxjs/toolkit';
 import toggleReducers from '../features/toggle/toggleInstances';
 
@@ -144,8 +139,7 @@ export default rootReducer;
 
 Create the store with the combined reducer.
 
-```javascript
-// src/app/store.js
+```javascript title = "src/app/store.js"
 import { configureStore } from '@reduxjs/toolkit';
 import rootReducer from './rootReducer';
 
@@ -160,8 +154,7 @@ export default store;
 
 Use the toggle slices in your components.
 
-```javascript
-// src/features/toggle/LightSwitch.js
+```javascript title ="src/toggle/lightSwitch.js"
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { toggleLight } from './toggleInstances';