Learn React Hooks

Actions

Instead of changing the state directly, we could make a function that deals with state changes. Such a function would only allow state changes via certain actions, such as a CHANGE_FILTER or a TOGGLE_EXPAND action.

Actions are simply objects that have a type key, telling us which action we are dealing with, and additional keys more closely describing the action.

The TOGGLE_EXPAND action is quite simple. It is simply an object with the action type defined:

{ type: 'TOGGLE_EXPAND' }

The CHANGE_FILTER action could deal with the complex state changes that we had problems with earlier, as follows:

{ type: 'CHANGE_FILTER', all: true }{ type: 'CHANGE_FILTER', fromDate: '2019-04-29' }{ type: 'CHANGE_FILTER', byAuthor: 'Daniel Bugl' }{ type: ...