Automatically Generate Action Creators With createSlice

[00:00 - 00:10] Using slices, currently we create actions and reducer handles for them separately. We migrated to create action and create reducer functions that made our code more compact, but we can move even further.

[00:11 - 00:20] Redux Toolkit provides a create slice function that automatically generates action creators based on the reducer handles you have. Let's rewrite our reducers to slices.

[00:21 - 01:16] Let's start with the history index slice. Go to SRC modules, history index, and rename the reducer to slice.ts inside of it import create slice and payload action from Redux JS Toolkit. Now we make the reducer into a slice. Remove the reducer, expert const history index equals create slice. We need to specify a bunch of options. First of all the name, it 's going to be used as a prefix to all the actions generated from this slice. History index. Then we specify the initial state, initial state, zero, and finally the reducers. The reducers field will determine what actions will this slice generate. We want to have undo, we pass in a function that processes the state and the action. Here we specify the type of the action to be payload action of type number.

[01:17 - 03:05] Payload action is a generic type that allows you to specify the type of the payload. In our case it's going to be a number. Inside of this function, we return math mean state plus one action payload. So the logic stays the same. And slices also use image as so you can just mut ate the state if you want to. Now we define the redo here we don't need an action. We only need state. We use math max instead of mean and state minus one and we compare it with zero instead of action payload. And then we'll have extra reducers and those use the external actions. So for example, in our case, we will use the end stroke action from the shared actions module here. Extra reducers is a function that receives a builder and we'll use it to define the handlers builder add case and stroke. We process the end stroke action and inside of it, if we got the end stroke action , we need to return zero. We reset the history index. Now below this slice, we expert the reducer, expert default history index reducer. We expert the actions expert const undo and redo equals history index actions. And we expert the history index selector. Now we don't need the actions file, you can remove it and remove the imports. All right, now we can go to the store.ts and update the import of the history index. Now we import default from modules history index slice. We also need to go to the edit panel and change the source of our undo and redo actions. Instead of history index actions, it will come from the slice. Do the same with the history index selector in the app.tsx file.

[03:06 - 03:47] Instead of history index reducer, it comes from the slice now. If you open the app, you should still be able to draw the strokes, you should be able to undo and redo them. The stroke slice. Go to a C modules, strokes, rename the reducer TS to slice. Inside of it, we'll need the create slice, the root state and the end stroke actions. The initial state stays the same. Now we'll need to remake the reducer to be a slice. Const strokes equals create slice. We provide the name is gonna be strokes, initial state and the reducers. In this case, we're only processing the end stroke action and we don't have the actions that will generate from these particular slice.

[03:48 - 05:02] So we pass in an empty object, but we'll need to define the extra reducers, extra reducers equals a function that receives a builder that will allow us to specify the cases. And here we use builder add case to handle the end stroke. We take the state and the action, and then we define history index and stroke constants from the action payload, history index stroke equals action payload. And then if history index is zero, then we push and use stroke to the state state push the stroke. Otherwise, we splice the state state splice minus history index history index stroke. All right, and now we expert the default reducer expert default strokes reducer, we expert the strokes length selector and the stroke selector. Current stroke slice open SRC modules current stroke reducer rename it to slice slice.ts. We'll need the create slice from the Redux toolkit and the payload action. Initial state stays the same, but we remake the reducer. Conced slice equals create slice. The name will be current stroke.

[05:03 - 05:27] Initial state stays the same and the reducers is going to be an object and we need to process begin stroke update stroke and set stroke color. Let's start with the begin stroke. It's a function that receives a state and an action of type payload action of type point. Inside of this function, we set the state points to a new array with just that point action payload. Def ine the update stroke.

[05:28 - 05:48] Here we also receive state and the action. We also receive payload action with payload of type point. And inside of this handler, we take the point and push it to the points array state points push action payload. And then in the set stroke color that also receives a state and an action payload.

[05:49 - 06:22] Action of type string that represents the color. Here we set the state color to action payload. All right. And the last thing that we need to process is the end stroke action and we put it into the extra reducers extra reducers. We pass in the function with builder as an argument. And then here we call builder add case and stroke. Here we'll take the state and set the state points to an empty array because every time we end the stroke, we need to reset the current stroke points.

[06:23 - 06:59] All right. Expert the reducer as the default expert default slice reducer. Expert the actions expert const begin stroke update stroke and set stroke color from slice actions . Remove the action imports and remove the actions dot TS current stroke selector can stay the same. Now we need to go to app TSX update the import slice update the imports in the store. Here we take the strokes from stroke slice and current stroke from the current stroke slice update the shared actions.

[07:00 - 07:20] Now we don't need the shared action type. So we can remove any action type input. And we can update the color panel TSX. Now instead of the actions module, we get the set stroke color action from the slice. All right, try to launch your application, draw some strokes, try to change the color, try to undo, redo and everything should continue to work.