[wolco]

Is there a way to cutdown the bloat?

[munchbunny]

Not in a substantial way. The boilerplate is a consequence of the functional “workaround”: representing a mutation as the result of applying a state transition to a complex state, and then computing what to display as a function of both the current and previous states.

The way to reduce the boilerplate is to use a mutable paradigm, but then you lose the simplifications that the immutable paradigm gives you.

[acemarke]

There's a fantastic library called Immer [0] that uses ES6 Proxies to let you write "mutative" update logic that is tracked and turned into a safe immutable update.

We recommend using Immer as the best way to write immutable logic with Redux [1], and our new Redux Toolkit package [2] automatically uses Immer internally to let you write reducers like this:

    const reducer = createReducer(initialState, {
      updateItem(state, action) {
        state.first.second[action.payload.id].fourth = action.payload.value
      }
    })

[0] https://immerjs.github.io/immer/

[1] https://redux.js.org/style-guide/style-guide/#use-immer-for-...

[2] https://redux-toolkit.js.org

[rictic]

Check out lit-html. You write functional style code, but the library does efficient minimal mutations of the dom with no virtual dom, and no dom diffing.

[Richicoder]

I'd recommend checkout out Redux Toolkit and reading over the docs. Severely cuts down the boilerplate, but still walks you through the general ideas and fundamentals in a great way.