Set up redux and add trecipe card list and modal to store
Project structure with redux:
In the redux dir, we have folders for each "state" managed by redux. So far, we have the TrecipeList and Modal. Each state comes with three sub-folders, types which defines the relevant actions and state types for using redux with TS, actions which has the action creators, and lastly reducers with functions producing new states.
Some important notes for using store states in your future components:
When passing in prop type to Component declaration (ie. the PropType in ComponentName extends React.Component<PropType, StateType>), we have to pass it a combined type. Say for a component you have some props passed in directly from parent component and also props mapped from store state, you would need to declare a type with both of those. An example from TrecipeCard component: type TCProps = TrecipeModel & ReturnType<typeof mapDispatchToProps>; Here, we have a combined prop TCProps with TrecipeModal (directly passed from parent MyTrecipes component, and the reducer functions from TrecipeList redux state.
TrecipeList
I've defined three actions and corresponding reducers for now, createNewTrecipe, deleteTrecipe, and updateTrecipe. createNewTrecipe is dispatched both from AddPopup and TrecipeCard component (The create button in AddPopup and the duplicate button in TrecipeCard have onClick handlers that dispatch create TC actions). deleteTrecipe is dispatched from TrecipeCard component's delete button onClick handler. For now, updateTrecipe is unused, but it will be when we finish implementing each Trecipe page.
Modal
Modal has just two actions and corresponding reducers, showModal and hideModal. showModal. Modal state basically keeps track of any component we want to display as a modal, and if no modal should be displayed, the state should be null. When we dispatch showModal action, we pass in as argument, the React component to be shown.
eg. this.props.showModal(<AddPopup />);
Some notes about the Modal component:
You will see that a Modal component is used inside AddPopup. The Modal component implements the generic elements for all modals. Those include stylings such as centering the modal dialog box, border, overlay, etc, as well as behaviours like closing the modal on Escape key press or overlay click. Also notice the Modal component takes in an optional onClose function as its props. This should be used when we want to provide extra logic on top of hiding the modal when Escape or overlay click event occurs. Since AddPopup does not require any extra logic on those events, it does not provide onClose prop to Modal.
Set up redux and add trecipe card list and modal to store
Project structure with redux:
reduxdir, we have folders for each "state" managed by redux. So far, we have theTrecipeListandModal. Each state comes with three sub-folders,typeswhich defines the relevant actions and state types for using redux with TS,actionswhich has the action creators, and lastlyreducerswith functions producing new states.PropTypeinComponentName extends React.Component<PropType, StateType>), we have to pass it a combined type. Say for a component you have some props passed in directly from parent component and also props mapped from store state, you would need to declare a type with both of those. An example from TrecipeCard component:type TCProps = TrecipeModel & ReturnType<typeof mapDispatchToProps>;Here, we have a combined propTCPropswith TrecipeModal (directly passed from parentMyTrecipescomponent, and the reducer functions fromTrecipeListredux state.TrecipeList
createNewTrecipe,deleteTrecipe, andupdateTrecipe.createNewTrecipeis dispatched both fromAddPopupandTrecipeCardcomponent (The create button inAddPopupand the duplicate button inTrecipeCardhave onClick handlers that dispatch create TC actions).deleteTrecipeis dispatched fromTrecipeCardcomponent's delete button onClick handler. For now,updateTrecipeis unused, but it will be when we finish implementing each Trecipe page.Modal
Modal has just two actions and corresponding reducers,
showModalandhideModal.showModal. Modal state basically keeps track of any component we want to display as a modal, and if no modal should be displayed, the state should be null. When we dispatchshowModalaction, we pass in as argument, the React component to be shown. eg.this.props.showModal(<AddPopup />);Some notes about the
Modalcomponent: You will see that aModalcomponent is used insideAddPopup. TheModalcomponent implements the generic elements for all modals. Those include stylings such as centering the modal dialog box, border, overlay, etc, as well as behaviours like closing the modal onEscapekey press or overlay click. Also notice theModalcomponent takes in an optionalonClosefunction as its props. This should be used when we want to provide extra logic on top of hiding the modal whenEscapeor overlay click event occurs. SinceAddPopupdoes not require any extra logic on those events, it does not provide onClose prop to Modal.