How to Update Redux Reducers With createReducer

[00:00 - 00:12] Using CreateReducer. Now let's update our reducers. For this Redux toolkit provides the CreateReducer method. The main difference you get when using it is that now you can mutate the state instead of always returning the new value.

[00:13 - 00:28] It is achieved by using the "Emer.js" library internally. Let's define the " CurrentStrokeReducer". Go to "SRC", "Modules", "CurrentStroke", "ReducerTS", "Import", "CreateReducer ", "FromRedux.js".

[00:29 - 00:37] Toolkit, we won't need the action type anymore. And now we make the reducer. Instead of defining it as a function, we'll now use the CreateReducer.

[00:38 - 00:54] "Reducer = CreateReducer" pass in the initial state, and then a function that will receive a builder where we'll define their cases. Or "ActionProcessors". "Builder = Add Case = BeginStroke".

[00:55 - 01:06] Here we pass a callback that will receive state and action. Inside we can mutate the state "StatePoints = new array with action payload".

[01:07 - 01:22] Add another case for "UpdateStroke". Here we can use "Push", because again we can mutate the state safely. We push "Action Payload". Define the "SetStrokeColor" case, "SetStrokeColor".

[01:23 - 01:35] Here we set "Color" to "Action Payload". You can also check the type of the action that we pass here. And it will always have the type of the action we're processing in this case.

[01:36 - 01:47] This is the power of the library originally written in TypeScript. "Builder = Add Case = stroke". We don't need the action here, because there is no payload we're interested in.

[01:48 - 02:03] So we get "State" and then assign "StatePoints = empty array". So createReducer accepts two arguments, the initial state, and the builder function that receives the action reducer map builder that has an "Add Case" method.

[02:04 - 02:13] We can call this method to process actions and update the state. Unlike regular reducers, here we can mutate the state directly, which is quite convenient.

[02:14 - 02:34] Now let's update the "StrokeReducer". Remove the "AllReducer" code, "Expert" " ConstReducer = createReducer" pass in "Initial". "Strokes" define them here, "Initial". "Strokes = empty array". And the type should be "rootStateStrokes".

[02:35 - 02:49] Fasten the builder function "Add Case" and "Stroke" will receive state and action. Get the history index and the stroke from the action payload, "HistoryIndex". " Stroke = action payload".

[02:50 - 03:03] Check if "HistoryIndex" is 0 then "StatePushStroke". Otherwise "StateSplyS - HistoryIndex". "HistoryIndexStroke".

[03:04 - 03:22] And finally update the "HistoryIndexReducer". We can also remove the "OldCode" "ExpertConstReducer". We'll need an "InitialState" here "ConstInitialState". It's going to be 0. The type should be "rootStateHistoryIndex".

[03:23 - 03:34] So we get the reducer by calling "CreateReducer" passing the "InitialState". We get the builder and define a new case. "Add Case" and "Do".

[03:35 - 03:41] Here we get "State and action" and then we return. Here with simple values it's easier to just return new values.

[03:42 - 04:02] "Math" "Min", "State + 1" or "Action Payload". Add another case for "Redo". Here we do "State - 1" and compare it with 0 and we don't need the action. And then add the "EndStroke". And "Stroke". Here we don't even need the state.

[04:03 - 04:16] As we're going to just reset the state value we return 0. Remove the action from here and launch the application. We are on start. Verify that everything still works. Let's draw a couple of strokes.

[04:17 - 04:21] Try to undo and redo them.