I'll quote the comment I made when this was posted over in /r/javascript a month ago [0]:
So, as a Redux maintainer...
I completely do _not_ see the point of trying to write reducers as classes.
A reducer is a pure function. There shouldn't be any use of `this` inside. Therefore, it doesn't need to be defined as a class instance method. Some kind of a factory function, as recommended in the docs? Sure.
Let me specifically address the points of concern about the `createReducer`-type approach:
>- In case of complex reducers we have to leave lots of comments describing what this reducer does and why.
I don't see how this changes no matter where or how you define the reducer.
> - Huge reducer maps are hard to read.
If this is truly a concern, then try defining the functions outside the lookup table.
> - Each reducer has only one corresponding action type. What if I want to run the same reducer for several actions?
Then define the functions outside the lookup table, and associate them with multiple keys.
Going a step further beyond this, our new Redux Starter Kit package [1] has a `createSlice` function [2] that will auto-generate action types and action creators for reducer functions that are passed in, and _also_ allows you to pass in reducers to handle action types that were defined elsewhere. Example:
const counter = createSlice({
slice: 'counter', // slice is optional, and could be blank ''
initialState: 0,
reducers: {
increment: state => state + 1,
decrement: state => state - 1,
multiply: (state, action) => state * action.payload
}
})
const user = createSlice({
slice: 'user',
initialState: { name: '', age: 20 },
reducers: {
setUserName: (state, action) => {
state.name = action.payload // "mutate" the state all you want with immer
}
},
extraReducers: {
[counter.actions.increment]: (state, action) => {
state.age += 1
}
}
})
I'd encourage folks to try out Redux Starter Kit and see how much it can help simplify your Redux apps.
How does `this` prevent any function from being a pure function? Classes could be just a different way to organize your code.
Anyway, lots of good arguments were made for and against in that reddit discussion.
https://www.reddit.com/r/javascript/comments/awk2be/reducer_...
2 comments
[ 0.23 ms ] story [ 629 ms ] threadSo, as a Redux maintainer...
I completely do _not_ see the point of trying to write reducers as classes.
A reducer is a pure function. There shouldn't be any use of `this` inside. Therefore, it doesn't need to be defined as a class instance method. Some kind of a factory function, as recommended in the docs? Sure.
Let me specifically address the points of concern about the `createReducer`-type approach:
>- In case of complex reducers we have to leave lots of comments describing what this reducer does and why.
I don't see how this changes no matter where or how you define the reducer.
> - Huge reducer maps are hard to read.
If this is truly a concern, then try defining the functions outside the lookup table.
> - Each reducer has only one corresponding action type. What if I want to run the same reducer for several actions?
Then define the functions outside the lookup table, and associate them with multiple keys.
Going a step further beyond this, our new Redux Starter Kit package [1] has a `createSlice` function [2] that will auto-generate action types and action creators for reducer functions that are passed in, and _also_ allows you to pass in reducers to handle action types that were defined elsewhere. Example:
I'd encourage folks to try out Redux Starter Kit and see how much it can help simplify your Redux apps.[0] https://www.reddit.com/r/javascript/comments/awk2be/reducer_...
[1] https://redux-starter-kit.js.org/
[2] https://redux-starter-kit.js.org/api/createSlice