No matter how many times I visit the React docs... I always doubt which is the skeleton for reducer functions.

There are VSCode extensions that do this exact thing. the thing is, I have already installed tons of extensions so, there is a code snippet instead:

Just open Snippets: Configure User Snippets and add the following section to the JSON:

    "react-reducer": {
        "scope": "javascriptreact,typescriptreact",
        "prefix": "\\reducer",
        "body": [
            "function reducer(state, action) {",
            "\tswitch(action.type) {",
            "\t\tcase \"${1:foo}\": {",
            "\t\t\treturn {",
            "\t\t\t\t...state,",
            "\t\t\t\tfoo: action.foo,",
            "\t\t\t};",
            "\t\t}",
            "\t}",
            "\tthrow Error('Unknown action: ' + action.type);",
            "}"
        ],
    },

Note: I use a custom prefix to name my custom snippets (\\); this way I'm able to locate my snippets quicker in the suggestion box.

--

Cover image from unDraw

Thanks for reading.
💚