Reduce Redux Boilerplate with Redux-Actions

khriztianmoreno.com

@khriztianmoreno

Cristian Moreno

I'm a community leader and altruistic speaker.

FullStack Javascript Developer

Web
khriztianmoreno.com

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

Youtube
https://bit.ly/2GNFgbH

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