How to Store a Drag-and-Drop Item's State in React AppState
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] Store the dragged item in the state. Go to SRC, state, upstate reducer, import the drag item, import drag item from the drag item module.
[00:12 - 00:19] Update the upstate type, add the dragged item field. It should have type drag item or null.
[00:20 - 00:26] Then go to upstate context and update the update. Here dragged item should be null by default.
[00:27 - 00:36] Also, add the dragged item to the upstate context drops. Dragged item is drag item or null.
[00:37 - 00:43] Then update the upstate provider. It should get the dragged item from the state and pass it to the value.
[00:44 - 00:57] Dragged item. Now in the actions.ts, defining you type in the union, type set dragged item, payload drag item or null.
[00:58 - 01:05] Define the action creator, expert const set dragged item. It's going to receive the dragged item.
[01:06 - 01:10] It's an optional argument and we should be able to reset it. So we accept null as well.
[01:11 - 01:23] We return an action with type set dragged item, payload dragged item. And now go back to upstate reducer and add a new case.
[01:24 - 01:32] Case set dragged item. We said draft dragged item to action payload.
[01:33 - 01:40] And then we break. Now we've updated our application logic to be able to store the dragged item in our state.