How to Build a Redux Color Selector

[00:00 - 00:23] Implement selecting colors. Right now we can only drop black strokes. Let's add a color panel and make it possible to select the stroke colors. First let's define the styles. Open index CSS, define a colors, class with display, flex, flex, direction, row, flex, wrap, wrap and width, 336 pixels.

[00:24 - 00:39] Now define the styles for the individual color squares. Color is going to have width, 24, height, 24, cursor, pointer and a box shadow. Now we have the styles for the, let's define the class for the colors panel.

[00:40 - 00:59] Colors panel is going to have position fixed, it shouldn't depend on the scroll position. 40 pixels from the bottom, 50% from the left. We use translate 3D to adjust for the size of the colors panel where we move it to the center and z index 10 so that it's on top of other elements.

[01:00 - 01:11] Then let's define another action. Open action's TS and define a new action. Type, type of, set, stroke, color and let's define the set stroke color constant.

[01:12 - 01:37] Expert, const, set, stroke. Color equals set, stroke, color. Our action should also have a payload. That is going to be a string. It's just going to contain the string representation of the hex value of the color. Now let's define the action creator. Expert, const, set, stroke, color equals a function that receives a color of type string.

[01:38 - 02:14] And then here we return an object with type, set, stroke, color and payload, color. Go to root reducer, import this new action type, set, stroke, color and define a new action handler. In this case, set, stroke, color. Here we want to update the state by updating the current stroke value of the old state. Everything stays the same. We repeat the state current stroke, but we only update the color field of the stroke.

[02:15 - 02:49] Get it from the action payload. Alright, now create a new file, as our C shared color panel.tsx. Here define a list of colors, const colors. You can get the full list of colors from the example folder attached to this lesson. It's going to contain a bunch. Now scroll down and define the component. Expert , const, color, panel is a functional component that is going to return a div with class name, window and colors panel.

[02:50 - 03:25] Inside of this div we're under the title bar, where we're under another div with a class name, title, bar, text and text colors. Below the title, we're under the window body. It also should have the colors class. There we map through the colors array and for each color, we're under a div with key color, class name, color and style. It's going to be a dynamic style, so we pass in an object with a background color property. That should equal color value from the map.

[03:26 - 04:08] When the user clicks on those colors, we should call the on color change function. Add on click handler. Here we pass in a function that will call set on color change and pass in the current color. Now, in the body of your component, get the dispatch method, const dispatch equals use dispatch, get on color change equals color string. Inside of it, we're going to use the dispatch method to dispatch the set stroke color action that we've defined previously, and we pass the color to it. In production creator, now go to the app component and add the color panel to the layout.

[04:09 - 04:22] You can add it just above the canvas color panel. If you open the app, you should be able to draw strokes, select colors and draw with different colors now. Let's set some nice sky and a yellow sun.