DEV Community

Cover image for VSCode snippet: React Reducer
Manuel Artero Anguita ๐ŸŸจ
Manuel Artero Anguita ๐ŸŸจ

Posted on

2

VSCode snippet: React Reducer

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);",
            "}"
        ],
    },
Enter fullscreen mode Exit fullscreen mode

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.
๐Ÿ’š

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Googleโ€™s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up