Reduce Redux Boilerplate with Redux-Actions

khriztianmoreno.com

@khriztianmoreno

Cristian Moreno

I'm a community leader and altruistic speaker.

FullStack Javascript Developer

<Commit.fm /> Podcast
https://spoti.fi/2EfgTlu

Hiring!!!

Senior Frontend Developer

ยฟFlux - Redux?

@khriztianmoreno

Action creators

@khriztianmoreno

- Create action with type and payload

- Returns a formatted action object

(Telegraph operator)

// FSA
{
  type: 'TYPE',
  payload: {},
  error: false,
  meta: {}
}

The Store

@khriztianmoreno

- There is only one

- It takes care of holding on to the whole state tree

- It delegates the work of figuring out what state changes need to happen

(over-controlling bureaucrats)

The Reducers

@khriztianmoreno

- When the store needs to know how an action changes the state, it asks the reducers.
- The state object isnโ€™t manipulated directly.
- Each slice is copied and then all of the slices are combined into a new state object.

(department of white-collar workers)

How they all work together

@khriztianmoreno

redux-actions

@khriztianmoreno

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.

Methods
createAction(s), handleAction(s), combineActions

@khriztianmoreno

@khriztianmoreno

Thanks ๐Ÿ™‡๐Ÿผ ๐Ÿ™๐Ÿผ ๐Ÿ‘จ๐Ÿผโ€๐Ÿ’ป

Reduce Redux Boilerplate with Redux-Actions

By Khriztian Moreno

Reduce Redux Boilerplate with Redux-Actions

Redux is a powerful way to manage application state, but that power can come with a lot of code. 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.

  • 1,017