improve redux part

docs/markdown/08-states/21-redux-toolkit.md

@@ -84,3 +84,55 @@ store.dispatch(todosActions.add('Easier with Redux Toolkit!'));
 ```
 
 <!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Actions without slice?
+
+```typescript
+export const navigateTo = createAction<string>('navigateTo');
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Extra reducer
+
+```typescript [7,13|8,12|9-11|7-13]
+export const todosSlice = createSlice({
+  name: 'todos',
+  initialState: { todos: [] },
+  reducers: {
+    /* ... */
+  },
+  extraReducers: (builder) => {
+    builder.addCase(navigateTo, (state, action) => {
+      if (action.payload === '/logout') {
+        state.todos = [];
+      }
+    });
+  },
+});
+```
+
+<!-- .element: class="big-code" -->
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Need a unique id?
+
+```typescript
+import { nanoid } from '@reduxjs/toolkit';
+
+const defaultSizeId: string = nanoid();
+const customSizeId: string = nanoid(10);
+```
+
+<!-- .element: class="big-code" -->

docs/markdown/08-states/25-lab-redux.md

@@ -10,6 +10,7 @@
 - Setup the store
 - Create the slice for the Carousel state
 - Rewrite Carousel `useCarousel` to use Redux
+- Pause and reset to the first person the carousel on navigate to another page
 
 </small>
 

steps/12-redux-solution/README.md

@@ -34,3 +34,10 @@ npm run 12-redux
    - Edit only `useCarousel` from `src/components/Carousel.tsx`
    - You should not change the API (states and functions) returned by the `useCarousel` hook, only change its implementation
    - Use `useEffect` to dispatch new people array to the store
+
+4. Pause and reset to the first person the carousel on navigate to another page
+
+   - Create in `src/store/actions.ts` an action `navigateTo`
+   - Dispatch this action at every router navigation
+   - Add an `extraReducer` to `carouselSlice` to pause and reset the carousel state when navigating outside the home page (pathname === '/')
+   - play when navigating to home page

steps/12-redux-solution/src/pages/router.tsx

@@ -1,28 +1,37 @@
-import { RouterProvider, createBrowserRouter, useParams } from 'react-router-dom';
+import { Outlet, RouterProvider, createBrowserRouter, useLocation, useParams } from 'react-router-dom';
 import { HomePage } from './HomePage';
 import { PeopleGridPage } from './PeopleGridPage';
 import { NotFoundPage } from './NotFoundPage';
 import { EditPeoplePage } from './EditPersonPage';
+import { useDispatch } from 'react-redux';
+import { navigateTo } from '../store/actions';
+import { useEffect } from 'react';
 
 export const router = createBrowserRouter([
   {
     path: '/',
-    Component: HomePage,
-  },
-  {
-    path: 'people',
-    Component: PeopleGridPage,
-  },
-  {
-    path: 'people/:id',
-    Component: () => {
-      const { id } = useParams();
-      return <EditPeoplePage id={id ?? ''} />;
-    },
-  },
-  {
-    path: '*',
-    Component: NotFoundPage,
+    Component: ConnectRouterToRedux,
+    children: [
+      {
+        index: true,
+        Component: HomePage,
+      },
+      {
+        path: 'people',
+        Component: PeopleGridPage,
+      },
+      {
+        path: 'people/:id',
+        Component: () => {
+          const { id } = useParams();
+          return <EditPeoplePage id={id ?? ''} />;
+        },
+      },
+      {
+        path: '*',
+        Component: NotFoundPage,
+      },
+    ],
   },
 ]);
 
@@ -33,3 +42,11 @@ if (import.meta.hot) {
 export function AppRouter() {
   return <RouterProvider router={router} />;
 }
+
+function ConnectRouterToRedux() {
+  const location = useLocation();
+  const dispatch = useDispatch();
+  dispatch(navigateTo(location));
+
+  return <Outlet />;
+}

steps/12-redux-solution/src/store/actions.ts

@@ -0,0 +1,4 @@
+import { createAction } from '@reduxjs/toolkit';
+import { Location } from 'react-router-dom';
+
+export const navigateTo = createAction<Location>('navigateTo');

steps/12-redux-solution/src/store/carousel-slice.ts

@@ -1,5 +1,6 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 import type { RootState } from './index';
+import { navigateTo } from './actions';
 
 type CarouselStatus = 'PLAY' | 'PAUSE';
 
@@ -10,7 +11,7 @@ export interface CarouselReducerState {
   status: CarouselStatus;
 }
 
-const initialState: CarouselReducerState = { people: [], currentIndex: -1, currentPerson: undefined, status: 'PLAY' };
+const initialState: CarouselReducerState = { people: [], currentIndex: -1, currentPerson: undefined, status: 'PAUSE' };
 
 export const carouselSlice = createSlice({
   name: 'carousel',
@@ -36,6 +37,17 @@ export const carouselSlice = createSlice({
       state.status = 'PAUSE';
     },
   },
+  extraReducers(builder) {
+    builder.addCase(navigateTo, (state, action) => {
+      if (action.payload.pathname === '/') {
+        state.status = 'PLAY';
+      } else {
+        state.currentIndex = 0;
+        state.currentPerson = state.people[0];
+        state.status = 'PAUSE';
+      }
+    });
+  },
 });
 
 // Action creators are generated for each case reducer function

steps/12-redux/README.md

@@ -34,3 +34,10 @@ npm run 12-redux
    - Edit only `useCarousel` from `src/components/Carousel.tsx`
    - You should not change the API (states and functions) returned by the `useCarousel` hook, only change its implementation
    - Use `useEffect` to dispatch new people array to the store
+
+4. Pause and reset to the first person the carousel on navigate to another page
+
+   - Create in `src/store/actions.ts` an action `navigateTo`
+   - Dispatch this action at every router navigation
+   - Add an `extraReducer` to `carouselSlice` to pause and reset the carousel state when navigating outside the home page (pathname === '/')
+   - play when navigating to home page