redux reduce boilerplate for actions and reducer

javascript redux

163 观看

3回复

329 作者的声誉

i try to figure out what the best practice for this situation.

2 context : SPORT todos & HOME todos.

so 2 action files:

export const SPORT_ADD_TODO = `[SPORT] ADD TODO`
export const HOME_ADD_TODO = `[HOME] ADD TODO`

and 2 reducer files

homeReducer(state, action) {
  switch(action.type) {
     case HOME_ADD_TODO:
        return Object.assing({}, state, {
           todos: action.payload
        })
     default:
        return state;
  }
}

sportReducer(state, action) {
      ....
}

have an official solution for this situation? i don't want to repeat my self. the reducer have the same functionality

作者: Alin 的来源 发布者: 2017 年 12 月 27 日

回应 3


1

1790 作者的声誉

In software development in general, when we want to create multiple instances of the similar objects, we use factories for object creation. Here the reducer in Redux context is just a pure function which is an object type is Javascript. So the factory rule applies here too.

Create a createTodoReducer factory:

function createTodoReducer(initialState, {addType}) {
  return function(state = initialState, action) {
    switch(action.type) {
      case addType:
        return {...state, todos: action.payload}
    }
  }
}

Now use the factory to instantiate sportTodosReducer and homeReducer:

const homeReducer = createTodosReducer({todos: []}, {addType: 'HOME_ADD_TODO'});
const sportsReducer = createTodoReducer({todos: []}, {addType: 'SPORTS_ADD_TODO'})

You can add any types to modify reducer state such as addType and share the same logic by using the factory.

作者: Farzad YZ 发布者: 2017 年 12 月 27 日

3

1194 作者的声誉

决定

you need to think again on your app architecture. in general reusable reducer/actions is incorrect.

why it's incorrect? in present view, it seem's awesome to write reusable reducer and actions, less boilerplate, and not "DRY". in example of your app. 'ADD_TO_DO' for home and sport are equal.

but in future it will be dangerous, thinking your boss/costumers need future in sports add_to_do. if you change the logic in the reusable reducer. your app will broke. (you can start patch your reusable reducer with if statements to get it work but if your app grow it will be not flexible/ readable/ maintenance ).

so yes it seems you need to write 2 reducers in this case, and 2 actions files. in present it fill equal but in the future it will be advantage and flexible.

作者: Lidor Avitan 发布者: 2018 年 1 月 9 日

0

1638 作者的声誉

Just found Autodux.

Actions, reducer, initial state and selectors defined in one object. If you just give an initial state it auto generates the rest upon the state shape.

Awesome!

// From this
const actionTypes = {
  INCREMENT: 'INCREMENT',
  DECREMENT: 'DECREMENT'
}

const actions = {
  increment: () => ({type: actionTypes.INCREMENT}),
  decrement: () => ({type: actionTypes.DECREMENT})
}

const counter = (state = 0, action) => {
  switch (action.type) {
    case actionTypes.INCREMENT:
      return state + 1
    case actionTypes.DECREMENT:
      return state - 1
    default:
      return state
  }
}

// To this
const counter = autodux({
  slice: 'counter',
  initial: 0,
  actions: {
    increment: state => state + 1,
    decrement: state => state - 1
  }
});

作者: cstuncsik 发布者: 2018 年 9 月 3 日
32x32