How to Create a Modal Window With React Redux
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[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.