Is Redux the best way to write gearboxes?

I think Redux matters a lot, but the main problem for me is how gearboxes are written today:

const addToDoReducer = (state, action) => {
    switch (action.type) {
        case ADD_TODO:
            return Object.assign({}, state, {
                todos: todos(state.todos, action)
            })
        case TOGGLE_TODO:
            return Object.assign({}, state, {
                todos: todos(state.todos, action)
            })
        default:
            return state
    }
}
  • gearboxes are too general (you can literally write a bloated gearbox that handles all kinds of actions and easily creates a mess), if nothing else violates the principle of shared responsibility.
  • the switch statement imposes side-effects of the service, such as changes in one case, that may violate other cases (for example, code that is already running)
  • always repeats "default: return state" (DRY does not work)
  • all reducers always call (calling functions do nothing, it's just wrong)

... this is at the end the gears become a weak / bridle project

Q: Is there a better way / option for recording a gearbox that:

  • ( )
  • switch

- :

const addToDoReducer = (state:toDoState, action:addAction) =>
{
    return { ...state, toDos: [...state.toDos, action.toDoObject] };
}

, ?

+4
3

Boilerplate , , , . :

function createReducer(initialState, handlers) {
  return function reducer(state = initialState, action) {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action)
    } else {
      return state
    }
  }
}

" " .

.:

: Redux , , . . switch, . , factory .

+4

:

// createReducer.js
export default (initiateState, reducerMap) => {
    return function(state, action) {
        const currentState = state !== undefined ? state : initiateState;
        const handler = reducerMap[action.type];
        return handler ? handler(currentState, action) : currentState;
    };
};
Hide result

, . :

import createReducer from './createReducer';

const STORE_TEST_MODULE = 'STORE_TEST_MODULE';

export default createReducer(
    // Initial state
    {
        test: null,
    },   
    {
        // Custom action #1
        [STORE_TEST_MODULE]: (state, action) => {
            return {...state, ...action.payload};
        },

        // Custom action #2
        'CLEAR_TEST': (state, action) => {
            return {test: null};
        },
    }
);
Hide result
0

, , :)

( , ),

, , - .
reducer . , "" , , , .

switch , , (, , )

if. .
, - " "
, , "ADD_TODO" "ADD_TODO"?
, import , .

"default: return state" ( DRY)

I can agree with this, but it is a very small price to pay for the benefits of listening to every action submitted (as I mentioned above). Anyway, there are ways to write "factory" functions to handle this for gearboxes, I just think it's overhead.

all reducers always call (calling functions do nothing just wrong)

Again, I think this is a huge gain, not a loss.

0
source

Source: https://habr.com/ru/post/1694317/


All Articles