Syllabus

https://docs.google.com/presentation/d/1w8HRmAK2HB5PuwOB0HdFeGbvntsvM3-rvHdNOPZ3lBs

Before you begin

Install all dependencies and link executables to child projects with npm i in the exercises folder.

Exercises

Exercise #1
Exercise #2
Exercise #3
Exercise #4
Exercise #5
Exercise #6
Exercise #7
Exercise #8
Exercise #9

Exercise #1

The main purpose of this exercise is to try React and its stateful components implemented with React Hooks.

Open the initial project 00-init
Create two function components (Header and UserList)

Header component

Location: src/modules/root/components/header.tsx

HeaderProps:

{
  title: string
}

This component just renders a heading (h1) with a string taken from the title property.

Create a function named Header that renders the heading
Create an interface HeaderProps and use it in the Header component
Use this component in the Root component, pass the title 'User Management'

UserTypes

Location: src/modules/users/user-types.ts

This file contains definitions of user interfaces.

Create and export two interfaces
- UserName contains two strings firstName and lastName
- User is the same as UserName, but additionally contains an id (number)

UserList component

Location: src/modules/users/components/user-list.tsx

This component renders a list of the users saved in the state and two buttons to add two different users.

Create a function named UserList that renders
- two buttons Add No One and Add Mother of Dragons
- a table of users with two columns First Name and Last Name. The table displays text No Users when the list is empty
The first button will add Arya Stark and the second one Daenerys Targaryen
Every user has id which should be unique within the list (we will not implement deleting users)
Create the initial state with the call of useState from React
Use the function returned by useState call to add a new user
Use correct types
Use this component in the Root component

Exercise #2

The main purpose of this exercise is to try stateless components.

Continue with your previous project or open 01-react-stateful
Modify UserList component into stateless function component

UserTypes

Location: src/modules/users/user-types.ts

Add an AddUser interface, it's a function which takes UserName as parameter and returns void

UserList component

Location: src/modules/users/components/user-list.tsx

Props:

{
  users: User[],
  addUser: AddUser
}

The functionality is the same like in the previous exercise. The only difference is that the logic will be outside the file.

Modify the UserList component into a function that renders users from the users property (or No Users when the list is empty)
Call the addUser function taken from the props when the user clicks on the button
Create and use a UserProps interface

Index file

Location: src/index.tsx

Move logic from the old UserList into the index file. All application data will be in a global object.

Create a global object called state with 2 fields (title and users)
Create your own function render that just calls ReactDOM.render and uses data from the global object
Create a function called addUser that adds the user into the list of users and calls your render function
- Please prefer immutable change of the state object
Define necessary interfaces

Root component

Location: src/modules/root/components/root.tsx

Props:

{
  title: string,
  users: User[],
  addUser: AddUser
}

Since we moved the logic into the index file and the Root component receives all necessary props, we need to send props into Header and UserList.

Additional task

Try 3 different versions of the Header component and see when they get rendered

Created as a class that extends React.Component
Created as a class that extends React.PureComponent
Created as a function

Exercise #3

The main purpose of this exercise is to try Redux.

Continue with your previous project or open 02-react-stateless
Move the logic into a reducer

UserActions

Location: src/modules/users/user-actions.ts

This file defines actions and action types.

Create and export an enum UserActionTypes of action types with one value addUser = 'users/addUser'
Create an interface AddUserAction which extends Action<T> from 'redux' for users/addUser action. In addition to the mandatory type property this action will contain a payload with the new user details.
```
{
  payload: UserName
}
```
Create a function (action creator of ActionCreator<A> type from 'redux') called addUser that takes UserName object as parameter and returns the AddUserAction action.
Create and export a new type UserActions, which is a union of all user actions. This is useful in the reducer when more actions are defined. Note, currently we have only one action users/addUser.
Create and export an object UserActionCreators, which congregates all user action creators.

usersReducer

Location: src/modules/users/users-reducer.ts

State:

{
  title: string,
  users: User[]
}

The logic from addUser function from the previous exercise will be in this reducer.

Create a reducer function of type Reducer<S, A> from 'redux'
Use an initial state
Modify users field in the state when the users/addUser action is dispatched
Don't forget to return unmodified state when a different action is dispatched

rootReducer

Location: src/modules/root/root-reducer.ts

This is the main reducer of the whole app. The main purpose is to combine all reducers from all modules into a single reducer.

Import your usersReducer
Use combineReducers from redux to create the root reducer
- The root reducer state will be a combination of all passed reducers states, the resulting state type can be inferred from the return type:
```
export type RootState = ReturnType<typeof rootReducer>
```

Index file

Location: src/index.tsx

Configure all necessary things for redux.

Create store with the createStore function from redux

The first argument is rootReducer

The second argument can be an enhancer. Use the following to setup the Redux DevTools Extension

declare global {
  interface Window {
    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose
  }
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

Create a function called dispatchAddUser that calls store.dispatch to dispatch the users/addUser action
Use data from store.getState() in your render function
Subscribe your render function with store.subscribe to re-render the app when an action is dispatched

Exercise #4

The main purpose of this exercise is to try React Redux and Redux Toolkit.

Continue with your previous project or open 03-redux
Use Provider from react-redux instead of the manual re-rendering
Use the React Redux hooks to get Redux store data in Header and UserList
Rewrite actions with Redux Toolkit

Header component

Location: src/modules/root/components/header.tsx

The same component like in the previous exercise.

Props:

{
}

Use useSelector from React Redux to get the title from Redux store
Remove the props - they are no longer needed

UserList component

Location: src/modules/users/components/user-list.tsx

The same component like in the previous exercise.

Props:

{
}

Use useSelector from React Redux to get the users list from Redux store
Use useDispatch to get the dispatch function of the Redux store. Use it to dispatch users/addUser action
Remove the props - they are no longer needed

Root component

Location: src/modules/root/components/root.tsx

Props:

{
}

Remove all props because Header and UserList components don't need them anymore.

Users slice

Location: src/modules/users/users-slice.ts

The same actions and reducer, but created with Redux Toolkit.

Use createSlice from Redux Toolkit to generate action creators and action types for user reducers.
Move adduser reducer implementation to this file and pass it with the reducer option to createSlice function.
Export actions and reducer returned by the createSlice function as usersActions and usersReducer.
Define necessary interfaces

UserActions

Location: src/modules/users/user-actions.ts

This file is no longer needed. The user actions are now generated in src/modules/users/users-slice.ts.

usersReducer

Location: src/modules/users/users-reducer.ts

This file is no longer needed. The addUser reducer was moved to src/modules/users/users-slice.ts.

Index file

Location: src/index.tsx

Currently, we need only store and we need to call ReactDOM.render directly with Provider component.

Remove own render function and directly call ReactDOM.render
Change the rendered component into Provider and put Root as its child
Remove dispatchAddUser (the action is dispatched in the UserList component)
Remove store.subscribe (it is not necessary with Provider)
Use configureStore function from Redux Toolkit instead of the createStore. This will by default enable the Redux DevTools Extension used in previous exercise. The composeEnhancers function is no longer needed.

Exercise #5

The main purpose of this exercise is to try Reselect.

Continue with your previous project or open 04-react-redux
Create selectors and use them in Header and UsersList

UsersSelectors

Location: src/modules/users/users-selectors.ts

Create a selector called getTitle with createSelector from reselect
- This selector just returns the title string from the state
Create a selector called getUsers with createSelector
- This selector just returns the users array from the state
Create a selector called getUserList with createSelector
- This selector uses the getUsers selector and modifies last names to upper case

Header component

Location: src/modules/root/components/header.tsx

The same component like in the previous exercise.

Use the getTitle selector in useSelector

UserList component

Location: src/modules/users/components/user-list.tsx

The same component like in the previous exercise.

Use the getUserList selector in useSelector call
Add a new component, which is a memoized version of <button>. Use React.memo.

Props:
```
  React.ButtonHTMLAttributes<HTMLButtonElement>
```
Use this memoized button in UserList component instead of the ordinary buttons
Use useCallback hook from React to memoize the callbacks passed to memoized buttons

Exercise #6

The main purpose of this exercise is to try Redux-Saga, axios, and Express.

Continue with your previous project or open 05-reselect
Create a simple server that allows you to add a new user and get a list of all users
Move the logic of adding a new user to the server
Create sagas that handle communication with the server

package.json

Location: package.json

Change the start script into the following

"start": "concurrently \"npm run start-fe\" \"npm run start-be\"",
"start-fe": "react-scripts start",
"start-be": "cd backend && nodemon server.ts",

Add proxy into the root to correctly handle CORS
- "proxy": "http://localhost:3001"

Server file

Location: backend/server.ts

A simple express server that has 2 routes GET /users and POST /users.

Create a server with express
Use express.json() and express.urlencoded() middleware
Create the route GET /users that returns all users from the user list
- Users can be stored in an array
Create the route POST /users that
- generates a new id
- adds a new user into the user list (firstName and lastName can be taken from req.body)
- returns the new user (id is included)

TypeScript configuration for BE

Location: backend/tsconfig.json

A simple TypeScript configuration file.

Extend the tsconfig-base.json located in the exercises directory
In the compiler options setup commonjs module, which is needed for Node.js

API Client

Location: src/modules/api/api-client.ts

This file contains an API client with axios that is used to make requests to the BE server.

Use axios.create to create the client
Set baseURL: 'http://localhost:3000' in the config

UsersEffects

Location: src/modules/users/users-effects.ts

This file defines all effect functions that perform the corresponding requests to API. We need only 2 effects right now - getUsers and addUser.

Create a function getUsers that makes a request to GET /users
Create a function addUser that makes a request to POST /users and sends an object with firstName and lastName in the request body

UsersSlice

Location: src/modules/users/users-slice.ts

We will need a new reducer to store fetched users into the state.

Add a new case reducer called usersLoaded to do it

Users are added on the BE side, so the addUser reducer is not needed anymore, but the action type still is.

Remove the addUser reducer
Add the addUser action creator to the usersActions export object
- Use createAction function to create the action creator with type users/addUser
  - You can use a literal type for action.type for stronger typing of sagas

usersSaga

Location: src/modules/users/users-saga.ts

This file is used to create redux sagas that handle side effects to communicate with the BE server. We need 2 sagas to handle all API effects we have - getUsers and addUser.

Create a saga called getUsers that
- calls UsersEffects.getUsers
- dispatch the users/usersLoaded action with data taken from the response
Create a saga called addUser that
- calls UsersEffects.addUser
- runs the getUsers saga to refresh the user list
Don't forget to use try/catch in both sagas
Create a saga called usersSaga (only this one needs to be exported - with export default) that
- runs the getUsers saga immediately (we don't have a router currently)
- runs the addUser saga when the users/addUser action is dispatched (hint: use takeEvery)

rootSaga

Location: src/modules/root/root-saga.ts

This file simply starts all sagas that are needed in the whole application. Currently, we have only our own usersSaga.

Create and export a saga called rootSaga that runs usersSaga (hint: use fork)

Index file

Location: src/index.tsx

Configure all necessary things for redux-saga.

Create sagaMiddleware with a function createSagaMiddleware (default export from redux-saga)
Pass the sagaMiddleware to the configureStore call with the middleware property
Run your root saga with sagaMiddleware.run(rootSaga)

Exercise #7

The main purpose of this exercise is to try normalizr.

Continue with your previous project or open 06-redux-saga
Add skills and regnal number to users
Save users and skills into the entity repository in the normalized form

Server file

Location: backend/server.ts

The server adds skills and set the correct regnal number to every user.

The entity interfaces are

interface Skill {
  id: string // e.g. skill-1
  name: string
}

interface UserSkill {
  skill: Skill
  level: number
}

interface User extends UserName {
  id: string; // e.g. user-1
  regnalNumber: number // use Arabic numerals
  skills: Array<UserSkill>
}

Create few skills (use string ids for easier understanding of normalizr)
When a new user is added
- Set id of the user as a string (e.g. user-1 instead of 1)
- Compute the correct regnal number for the user
- Add some skills to the user where level is somehow based on the regnal number (it doesn't matter what equation you use - it can be for example level = 3 * regnalNumber)

Entities Schema

Location: src/modules/entities/entities-schema.ts

This file contains normalizr schema of our entities.

Create schema for Skill, UserSkill, and User entities
If an entity doesn't have the id field, you need to specify one with idAttribute, which can be a string (name of the id field) or a function that creates the value of id field

Entities types

Location: src/modules/entities/entities-types.ts

This file contains type definitions for normalized user data.

Add and export Skill, UserSkill and User types, which are the normalized version of types defined in src/modules/users/user-types.ts.
- The normalized version uses the id of an entity instead of nested types:
```
interface UserSkill {
  id: string
  skill: string
  level: number
}
```

Add and export the UserEntities type, which describes entities created by the user data normalization:

{
  skills: { [key: string]: Skill }
  userSkills: { [key: string]: UserSkill }
  users: { [key: string]: User }
}

Add and export the UserIds type (a string array), which describes the user ids returned from the normalize call (result property).

usersSlice

Location: src/modules/users/users-slice.ts

State:

{
  title: string,
  userIds: string[]
}

Update this reducer to store userIds instead of users
Update the action payload to be of the UserIds type

Entities slice

Location: src/modules/entities/entities-slice.ts

This file contains an entities reducer, which manages the entities repository.

Create and export an EntitiesState type/interface, which is equal to UserEntities. This state would contain all normalized entities used in the application.
Let's setup the updateEntities case reducer which would make a recursive merge of current state with the newly received entities. This is a common approach in the applications where the entities are fetched in small portions.
- This function has two arguments:
  - state of type EntitiesState
  - action, which payload may contain any part of the state
- Use the mergeWith function from the Lodash library.
- Create and use the customizer which changes the merge strategy for arrays by always choosing the new value. Our customizer will take objValue and srcValue as arguments and return srcValue if both arguments are arrays. For other types it will return undefined, which indicates no customization.
Create the entities slice with createSlice function
- Use EntitiesState for the state type.
- Add an entitiesUpdated reducer which updates the entities repository by calling updateEntities case reducer.
Export the entitiesReducer and entitiesActions.

rootReducer

Location: src/modules/root/root-reducer.ts

The created entities reducer needs to be added into the root reducer.

Import the created entitiesReducer and add it to the root reducer

entitiesSaga

Location: src/modules/entities/entities-saga.ts

This file contains a saga which normalizes data and stores them to the entities state.

Create a normalizeAndStore saga:
- Call normalize(data, schema) to normalize the passed data.
  - The normalize function returns an object with two properties: entities and result.
- Dispatch entities/entitiesUpdated action with the payload containing entities.
- Return the result.

usersSaga

Location: src/modules/users/users-saga.ts

Currently, the same denormalized data that comes from the BE server are stored in the state. We need to normalize the data from response and store them in the entity repository.

Call the normalizeAndStore saga to normalize the fetched data and store the entities
Dispatch the users/usersLoaded action to save the user ids the store

EntitiesSelectors

Location: src/modules/entities/entities-selectors.ts

Since data are stored in the normalized form in the state, we need to denormalize them for easier access to values.

Create 3 selectors (getUsers, getSkills, and getUserSkills) that return the corresponding entities in the denormalized form
- Hint: use mapValues from lodash to create a new object with keys identical to source object.

UsersSelectors

Location: src/modules/users/users-selectors.ts

The users reducer doesn't store the entity data, it stores ids only.

Create a new selector called getUserIds that returns ids from the redux state
Modify the getUsers selector to map users ids from the users reducer into denormalized users
Modify the getUserList selector to return the users with
- upper cased last names
- converted regnal number into Roman numerals (use the roman-numerals library)

UserList component

Location: src/modules/users/components/user-list.ts

Print regnalNumber next to the first name

Exercise #8

The main purpose of this exercise is to try router5 and @salsita/react-crud.

Continue with your previous project or open 07-normalizr
This exercise uses react-modules packages
Create a page for user detail (e.g. at /users/user-1)
Use @salsita/react-crud to automate entity fetching

Attention

The solution of this exercise (08-router5) uses a separate set of dependencies. You can run npm install in the corresponding directory to install them.

Server file

Location: src/server.js

Add a route to fetch a single user.

Add a route for GET /users/:id and return the corresponding user in the response

rootReducer

Location: src/modules/root/root-reducer.js

We need to add all required reducers into the root reducer.

Import import { apiReducer as api } from '@salsita/react-api';
Import import { crudReducer as crud } from '@salsita/react-crud';
Import import { routerReducer as router } from '@salsita/react-router';
Add all three reducers into the root reducer

Routes

Location: src/router/routes.js

This file contains names and configuration of routes.

Create 2 routes
- const USERS_LIST = 'users' for the list of all users
- const USER_DETAIL = 'users.detail' for the detail page (with id parameter)

Index file

Location: src/index.js

Use buildRouter and buildStore functions for easier configuration of redux, router5, and redux-saga.

Import import { buildRouter } from '@salsita/react-router';
Import import { buildStore } from '@salsita/react-core';
Create a router with the buildRouter(routes, options) function
- You can specify the defaultRoute in the options argument
Create the redux store with the buildStore(rootReducer, rootSaga, router) function
Start the router

UserDetail component

Location: src/modules/users/components/user-detail.js

Props:

{
  userDetail: {
    firstName: string,
    lastName: string,
    regnalNumber: string,
    skills: Array<{
      skill: {
        name: string
      },
      level: number
    }>
  }
}

This component displays a user detail with skills information.

Create UserDetail that displays the data

UsersRoute component

Location src/modules/users/components/users-route.js

Props:

{
  route: {
    name: string
  }
}

This component takes care about the proper routing in the users module.

Render the UserDetail component if the current route ends with detail (hint: use endsWithSegment from router5-helpers)
Otherwise, render the UsersList component

UsersList component

Location: src/modules/users/components/users-list.js

We need to add links to the detail page. Navigate to the detail page when the user clicks on the first name.

Import import { Link } from '@salsita/react-router';
Use the Link component and set name and params props on it

Root component

Location: src/modules/root/components/root.js

Use the Route component from @salsita/react-router for easier routing. You can also use ApiErrorToast and ApiLoader to display a basic error toast and loading spinner. The data for both components are automatically stored in the state from @salsita/react-api.

Import import { Route } from '@salsita/react-router';
Use the Route component instead of UsersList and set startsWith and component props on it
Import import { ApiErrorToast, ApiLoader } from '@salsita/react-api';
Use Portal from react-portal to render ApiErrorToast and ApiLoader

CRUD Saga file

Location: src/modules/crud/crud-saga.js

This file contains two important functions for the CRUD module - mapEntityToSaveParams and mapRouteToFetchParams. Both of them return params that are used for saving or fetching entities.

Create a function called mapEntityToSaveParams(entity, isUpdate) that
- has the following arguments
  - entity is a string that describes the name of the entity currently being saved
  - isUpdate is a boolean flag to distinguish between create and update
- returns the following object
```
{
  effect: (data: any) => void, // an effect to save the entity
  schema: Schema // a schema from normalizr
}
```

Create a function called mapRouteToFetchParams(route) that

receives the name of the current route

returns the following object

{
  [identifier]: { // this can be any string that identifies the fetched data
    effect: (...effectParams: any) => data, // an effect to fetch the entity
    schema: Schema // a schema from normalizr
    effectParamsFactory: (state: RootState) => any[] // the result is used for effectParams
  }
}

CRUD Entities

Location: src/modules/crud/crud-entities.js

This file has only string constants with entity names for mapEntityToSaveParams

Create a constant for USER entity

CrudSelectors

Location: src/modules/crud/crud-selectors.js

The CRUD module takes care about automatic storing of entity ids. Since the ids won't be in the usersReducer anymore, we need to slightly update UsersSelectors and move them into CrudSelectors.

Create the following selectors that read the data from CRUD and Entities modules
- getUsersList
- getUserDetail

UsersSelectors

Location: src/modules/users/users-selectors.js

Update the getUsersList selector (hint: use CrudSelectors)

rootSaga

Location: src/modules/root/root-saga.js

Start crudSaga to automatically fetch entities.

Import import { crudSaga } from '@salsita/react-crud';
Start crudSaga (it needs mapRouteToFetchParams as an argument)

UsersEffects

Location: src/modules/users/users-effects.js

We need a new effect to fetch a single user. Also, we should use wrapApiCall from @salsita/react-api for proper error handling.

Import import { wrapApiCall } from '@salsita/react-api';
Wrap all effects with wrapApiCall(effect)
Add a new effect called getUser

usersSaga

Location: src/modules/users/users-saga.js

The CRUD module handles entity fetching so we don't need the getUsers saga anymore. Use the saveEntity saga from @salsita/react-crud for better error handling and fetchEntities to refresh the user list.

Call the saveEntity(data, entity, mapEntityToSaveParams) saga (instead of the direct effect call) that
- has the following arguments
  - data is an object that is sent to the BE server
  - entity is a string that describes the name of the entity currently being saved
  - mapEntityToSaveParams is a function that defines defines save params (effect and schema) to use
- returns the response from the server (you don't have to use .data field)
Call the fetchEntities(route, mapRouteToFetchParams) saga (to refresh the user list) that
- has the following arguments
  - route is the name of the route you want to refresh
  - mapRouteToFetchParams is a function that defines fetch params (effect and schema) to use

UsersActions

Location: src/modules/users/users-actions.js

We don't need the USERS_LOADED action anymore.

Delete the usersLoaded action creator

usersReducer

Location: src/modules/users/users-reducer.js

State:

{
  title: string
}

Delete the unused usersLoaded action handler

Exercise #9

The main purpose of this exercise is to try Redux Form.

Continue with your previous project or open 08-router5
This exercise uses react-modules packages
Create forms for creating and updating users

Attention

The solution of this exercise (09-forms) uses a separate set of dependencies. You can run npm install in the corresponding directory to install them.

Server file

Location: src/server.js

Add routes that updates a user and fetches skills. Modify the route that saves a new user.

Add a route for PATCH /users/:id that updates the user and returns the updated user in the response
Add a route for GET /skills that returns all skills
Modify the route POST /users/:id and add skills field into the request body

rootReducer

Location: src/modules/root/root-reducer.js

We need to add the form reducer into the root reducer.

Import import { formsReducer as form } from '@salsita/react-forms';
Add the form reducer into the root reducer

Routes

Location: src/router/routes.js

Create a new route const USER_CREATE = 'users.create' for the form that creates a new user

UsersEffects

Location: src/modules/users/users-effects.js

We need new effects to update a user and fetch all skills.

Add a new effect called updateUser
Add a new effect called getSkills

UsersActions

Location: src/modules/users/users-actions.js

Currently, we have only one action called ADD_USER that is dispatched when a user clicks on one of the buttons. Since we will use this action to create or update a user, let's rename it to SAVE_USER.

Rename the ADD_USER action to SAVE_USER

CRUD Saga file

Location: src/modules/crud/crud-saga.js

We will need a list of all skills to display them in the create/edit form. We also have a new effect called updateUser so we can use it in mapEntityToSaveParams.

Fetch skills in the USERS_LIST route
Add the updateUser effect into mapEntityToSaveParams (hint: use the isUpdate argument to distinguish between create and update)

CrudSelectors

Location: src/modules/crud/crud-selectors.js

Add a selector called getSkills

UserForm component

Location: src/modules/users/components/user-form.js

This form component has fields for firstName, lastName, and skills where a single user can have multiple skills.

Use FormField from @salsita/react-forms for
- firstName
- lastName
Use FormFieldSelect from @salsita/react-forms for skills
Since a user can have multiple skills, implement adding and deleting of skills with the FieldArray component from redux-form
Implement the following field-level validations
- firstName cannot be an empty string
- lastName cannot be an empty string
- skills cannot be empty and must be unique
You can use some validation functions from @salsita/react-forms

UserCreate component

Location: src/modules/users/components/user-create.js

Props:

{
  saveUser: (formData: object) => void
}

This component just renders the UserForm component to create a new user.

UserDetail component

Location: src/modules/users/components/user-detail.js

Props:

{
  userDetail: {
    firstName: string,
    lastName: string,
    regnalNumber: string,
    skills: Array<{
      skill: {
        name: string
      },
      level: number
    }>
  },
  saveUser: (formData: object) => void
}

This component just renders the UserForm component with initialValues to edit a user.

UsersList component

Location: src/modules/users/components/users-list.js

Props:

{
  users: Array<{
    id: number,
    firstName: string,
    lastName: string,
    regnalNumber: string
  }>
}

Remove both buttons
Add a Link to the USERS page

UsersRoute component

Location src/modules/users/components/users-route.js

We want to display the UserCreate component in a modal dialog while the users list is shown in the background.

Render both UsersList and UserCreate on the create route
Use Portal to put the UserCreate component in the modal dialog

usersSaga

Location: src/modules/users/users-saga.js

There are couple of things we need to update in our sagas.

Currently, our saga handles update as well so it is good to rename it to saveUser since the new name of the action that starts the saga is SAVE_USER.
- Update names of the action and saga
Since the saveUser saga can be called from two routes now (USERS_LIST and USER_DETAIL), we want to redirect the user into USERS_LIST route after the successful submission.
- Import import { RouterActions } from '@salsita/react-router';
- Use the RouterActions.Creators.navigateTo(routeName) action to perform the redirect
Since we use forms for creating and updating users, we should add the 4th argument to the saveEntity saga, which is the name of the form that was submitted

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

Syllabus

Before you begin

Exercises

Exercise #1

Header component

UserTypes

UserList component

Exercise #2

UserTypes

UserList component

Index file

Root component

Additional task

Exercise #3

UserActions

usersReducer

rootReducer

Index file

Exercise #4

Header component

UserList component

Root component

Users slice

UserActions

usersReducer

Index file

Exercise #5

UsersSelectors

Header component

UserList component

Exercise #6

package.json

Server file

TypeScript configuration for BE

API Client

UsersEffects

UsersSlice

usersSaga

rootSaga

Index file

Exercise #7

Server file

Entities Schema

Entities types

usersSlice

Entities slice

rootReducer

entitiesSaga

usersSaga

EntitiesSelectors

UsersSelectors

UserList component

Exercise #8

Attention

Server file

rootReducer

Routes

Index file

UserDetail component

UsersRoute component

UsersList component

Root component

CRUD Saga file

CRUD Entities

CrudSelectors

UsersSelectors

rootSaga

UsersEffects

usersSaga

UsersActions

usersReducer

Exercise #9

Attention

Server file