React series — FSA knowledge

Time:2021-9-21

Flux Standard Action

Action is a very important concept in flux architecture. It is a necessary condition for application state change. All States must be triggered through action. The role of action is the carrier of state change information. It is an object that contains a field representing action type, which is all the requirements of flux for action. Different from the broad requirements of flux as an architecture idea, in actual development, we often hope that the similar objects we deal with have similar interfaces / structures.

The positioning of flux standard action is “a user-friendly flux action object standard”. It hopes to lay the foundation for general action tools or abstract implementation by standardizing the format of action. In other words, if all actions have similar structures, it is possible to create or modify actions through unified methods, or analyze and respond to actions through unified logic.

FSA structure

The typical flux standard action structure is as follows:

{
    type: 'ADD_TODO',
    payload: {
        text: 'Do something.'
    }
}

It is not difficult to find that the FSA is an ordinary action first, which encourages us to put the load information into the payload field. Based on this preliminary understanding, learn about its specification.

  • An action must be an ordinary JavaScript object with a type field.
  • An action may have an error field, a payload field, and a meta field.
  • An action must not contain fields other than type, payload, error and meta.

type
Required fields. The type field of action identifies the essential characteristics of the current behavior. The type values of actions corresponding to behaviors of the same type must be strictly equal. It is often taken as a string constant.

payload
Optional fields. It can be any type of data. As the name suggests, it stores the “load” content of the current action. When the error field value is true, the value of payload should be an error object.

error
Optional fields. When the value is true, the current action represents that an error has occurred somewhere.

meta
Optional fields. Can be any type of data. Additional information used to store non load content. In the Redux project, a typical example of using meta is to store the information used for middleware. Theoretically, the content of meta will not affect the behavior of reducer.

As mentioned earlier, based on the same action structure, it will be more convenient to extract the public logic of action operations. Redux actions and Redux promise are action processing tools derived from FSA.

redux-actions

In Redux, you can use Redux actions to create FSA compliant actions. Let’s start with ordinary action objects.

Take adding a todo action as an example:

{
    type:'add_todo',
    Data: 'I'm going to run'
}

In this way, an action to add a todo is defined, and then the action can be triggered through a certain action. The data carried by the action updates the store (state / reducer):

store.dispatch({
    type:'add_todo',
    data:'your data'
})

Type is a constant and a required field of an action, which is used to identify the type of the action. At the beginning of the project, defining an action in this way can also make the code happy. However, with the increase of the complexity of the project, this method will make the code redundant, because if multiple actions trigger the same action, the action must be written multiple times; At the same time, it will also cause unclear code structure. Therefore, you have to change the way you create an action:

const ADD_TODO = 'add_todo';

let addTodo = (data='default data') => {
    return {
        type: ADD_TODO,
        data: data
    }
}

//Trigger action
store.dispatch(addTodo());

After the change, the code is much clearer. If multiple actions trigger the same action, just call the function addtodo and pass the data to be carried by the action to the function. Functions like addtodo are called action creator. The only function of action creator is to return an action for dispatch to call.

However, the action returned by such an action creator is not a standard action. In the architecture of flux, an action must meet the following conditions to comply with FSA (flux standard action) specification:

  • Is a plain text object
  • Only one or more attributes in type, payload, error, and meta are available. The type field cannot be defaulted, and other fields can be defaulted
  • If the action reports an error, the error field cannot be defaulted and must be true

Payload is an object that is used as a carrier for action to carry data. Therefore, the above wording can be changed to:

let addTodo = (data='default data') => {
    return {
        type: ADD_TODO,
        payload: {
            data
        }
    }
}

In the Redux bucket, you can use Redux actions to create actions that comply with the FSA specification:

import {creatAction} from 'redux-actions';

let addTodo = creatAction(ADD_TODO)
//same as
let addTodo = creatAction(ADD_TODO,data=>data)

You can use the following simple method to check whether an action complies with FSA standards:

let isFSA = Object.keys(action).every((item)=>{
   return  ['payload','type','error','meta'].indexOf(item) >  -1
})

Recommended Today

Seven Python code review tools recommended

althoughPythonLanguage is one of the most flexible development languages at present, but developers often abuse its flexibility and even violate relevant standards. So PythoncodeThe following common quality problems often occur: Some unused modules have been imported Function is missing arguments in various calls The appropriate format indentation is missing Missing appropriate spaces before and after […]