How to Create a Modal Window With React Redux
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:11] Add the model_windows slice. To keep the state of our model_windows, we'll create new slice in the SRC modules, create new folder, models, and there create a slice.ts.
[00:12 - 00:24] Define the model_state_type. Expert type model state will contain is shown, it's a boolean, and also the model name is going to be a string or null.
[00:25 - 00:49] Define the initial state. Const to initial state of type model_state is an object is shown true model name null. Now define the slice. Const slice equals create slice. Name is model_initial_ state is the one that we've just defined and then reducers will contain two handlers.
[00:50 - 01:17] Show that will take the state and action of type payload_action with a string payload, and then inside is going to set state is shown true state model name action payload. And then the second one is going to be hide. Here we don't need an action, we just set is shown to false and model name to null.
[01:18 - 01:41] Expert the reducer actions and selectors. Expert const model_visible equals slice reducer. Expert const show and hide equals slice actions. Also expert the model_visible_selector and model_name_selector. We need to update the root state so that includes the model state there.
[01:42 - 01:59] Otherwise we will get errors in the selectors. Go to types.ts add model_visible _model_state. Impert model_state from the slice. Now go to the store and add model_visible_reducer to the list of reducers. Here we go.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)