Hello! This article will be useful to those who are tired of using constants in Redux (partly shown in the preview above). Under the cut, I will show another possible bike and how to ride it.

Module + documentation ( https://github.com/pavelivanov/redaction )

Introduction

The use of Redux implies the presence of actions (actions) and reducers (reducers), as well as constants, which are used to link actions with reducers by passing the type (action type).

Usage example:

const ADD_TODO = 'ADD_TODO' export { ADD_TODO } 

 import { ADD_TODO } from 'constants' export const addTODO = () => { return (dispatch) => { dispatch({ type: ADD_TODO, item }) } } 

 const ADD_TODO = 'ADD_TODO' const initialState = { TODO: [] } export default (state = initialState, action) => { switch (action.type) { case 'ADD_TODO': return { ...state, TODO: [ ...state.TODO, action.TODO ] } default: return state } } 

In this approach, there are a lot of disadvantages, starting from the use of constants, and ending with the forwarding of the dispatch method to all components where we need to call the action.

Simple Reducers

In Redaction, I got rid of these problems. All you need is to create an action and use it. Everything.

An example of the same code (above) using Redaction :

 import { createAction } from 'redaction' export const initialState = { TODO: [] } export const addTODO = createAction((state, payload) => { return { ...state, TODO: [ ...state.TODO, payload ] } }) 

The principal difference is that for the transfer of the initial state an export is made from the file.

Request Actions

As for the action request, Redaction offers a large amount of sugar. Usage example:

We create an action:

 // actions/users.js import { createAction } from 'redaction' export const getFeed = createAction({ endpoint: '/api/users/me/posts', method: 'GET' }) 

Call the created action:

 // containers/Users/Feed.js import actions from 'core/actions' actions.users.getFeed({ subset: 'posts' }) 

As a result, a call to getFeed in state will:

 { users: { posts: { pending: false, data: RESPONSE_BODY, error: null } } } 

It is worth noting that createAction and the method that it returns as a result of execution takes the same parameters, i.e. The subset could also be specified in createAction, and then also overridden by a call in different places.

Each subset has 3 states:

1) the beginning of the request {pending: true, data: null, error: null}
2) request is executed {pending: false, data: RESPONSE_BODY, error: null}
3) the request was made with errors {pending: false, data: null, error: RESPONSE_ERROR}

You no longer need to suffer with the creation of three action games with three different types to handle the necessary case from the reducer.

Read more about createAction

For sending requests inside superagent is used. The createAction option accepts almost all parameters that are used in superagent.

Basic options:

params <Object>

Any key from options can be a function, in this case one of the arguments of this function is the params object. The exceptions are onResponse and onError.

endpoint <String | Function>

Request URL.
Example use with params:

 export const getFeed = createAction({ endpoint: ({ userId }) => `/api/users/${userId}/posts`, method: 'GET' }) getFeed({ params: { userId: 100 } }) 

subset <String | Function>

The name of the key in which the data will be stored in state. It is worth considering that the full path will be based on the scheme: NAME_FILE.subset

modifyResponse <Function>

Handler for editing the response from the server. Takes two arguments - the Response object from the server and params. Waits for new data to be returned. You must return response.body

modifyState <Function>

Handler for changing state directly. Takes two arguments - the entire State object and params. It can be useful to change individual parts of the repository when using a single action. Use with caution!

onResponse <Function>

A handler that is called upon successful execution of a request takes one argument - the Response object from the server.

onError <Function>

A handler that is called when a request fails, takes two arguments — an error object and a Response object from the server.

Redaction Initialization Process

I decided not to write an initialization process in Russian, all this is in the documentation on the repository page, BUT, if there are enough people willing, I can expand the article by adding such a description.

Conclusion

I would be glad if my module would be useful. Open to questions, comments and suggestions for expanding functionality. Module source code, available in the GitHub repository

UPD1: renamed the module to RedAction ( https://github.com/pavelivanov/redaction )