redux reduce boilerplate for actions and reducer

redux-actions
redux-actions tutorial
redux boilerplate
redux-arc
redux starter kit
flux standard action
typescript redux reduce boilerplate
redux reducer

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

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.

Reducing Redux boilerplate with Redux-Leaves, Instead, Redux-Leaves treats each node of data, or “leaf” in their nomenclature, as a first-class citizen. Each leaf comes with built-in reducers, so you don't have to write them. This enables you to remove a lot of boilerplate from your application. 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

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.

Three ways to reduce the Redux boilerplate (and become more , Three ways to reduce the Redux boilerplate (and become more productive) Fewer files when using Ducks. It is common to have separate files for actions, reducers and action types. You don't have to use types. Use the short version of mapDispatchToProps. BONUS: use spread syntax in reducers. A single update can sometimes require changes across many files and the code required to define action creators and to handle those actions in your reducer can start to get pretty repetitive. The redux-actions library offers a small but powerful API to help cut down on some of the boilerplate that is typical of an application that uses Redux to handle state management.

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
  }
});

How to reduce boilerplate in Redux, Reducer, take one. In a traditional Redux app we'd create a subreducer for appState.posts : const postReducer = (postState: PostState, action: AppAction):  To do this, I recommend using the reduce-reducers Redux utility. Reduce-reducers enables the combining of existing reducers with new ones. yarn add reduce-reducers. With this tool, it is possible to add Redux-Leaves to your application, without rewriting any code (yet).

Reducing boilerplate in Redux Apps with Arc, It has utilities to abstract the creation of action types, action creators, reducers and it also has an elegant way to manage async requests. It's also  So I created boilerplate-reducer to reduce reducer boilerplate. Note: This is a helper and should not be a replacement for understanding the core concepts of Redux (e.g. that reducers can respond to any action types, even those that might be associated with other parts of the state tree).

Yet another guide to reduce boilerplate in your Redux (NGRX) app, Let's take a minute here to think why we even need action types. Of course, to help the reducer somehow differentiate between incoming actions  Redux Preboiled is a library of boilerplate-reducing Redux helper functions, designed to fit together nicely while still being usable individually. It is written in and optimized for TypeScript, while still being a good fit for pure-JavaScript apps.

Reduce Redux Boilerplate with Redux-Actions from @avanslaars on , A single update can sometimes require changes across many files and the code required to define action creators and to handle those actions in your reducer can​  When you have a reducer that is used with async actions, there is often a lot of boilerplate code that is required. For example, most of my reducers I use async actions with have a switch very similar to this: const defaultState = { isPe

Comments
  • When you say they have the same functionality - I have a hard time understanding what you're saying. Since there are 2 separate reducers, they are actually adding todos into 2 separate parts of the state tree. One on the home branch and one of the sport branch of the state. So are they actually doing the same thing, or are the method bodies just similar since you're performing "alike" actions?
  • yes they doing the same thing for other branch, but i dont want to copy past every time i have new branch. i try to understand what the solution for this problem without copy past action and reducers
  • Well each reducer only has access to its' own state.
  • it's nice but the problem that i again need to rewrite all actions for any reducer! and for typescript is unfreindly
  • Since the logic of reducers is similar, means data types are similar too. So you can create factories for similar action creators too.