Redux-observable notes

Welcome to the Guide and discussion:)

　　Objective

　　　This article does not involve in-depth knowledge, just on the conceptual level and a simple example explaining how redux-observable works.

Redux-observable, is a middleware library for redux. It automatically responds to the actions we dispatch and executes the corresponding functions, allowing us to separate complex asynchronous functions into some epic functions. React-thunk is therefore no longer needed to allow Redux to support so-called asynchronous actions, while allowing code coupling to drop even lower. Redux-observable makes Redux's action more pure, clean object literal--redux-observable suitable for large and complex state management, and allows for higher code separation and maintainability. However, you may need to master the basic concepts and API usage of RXJS first.

　　

　　Several concepts

　　　　The internal principles of flow and automatic response, redux dispatch, epics function, redux-observable are observed.

　　　　Observable flow and automatic response

　　　　　　The observable stream is the equivalent of a transmitter , which is capable of sending/generating various values over time, and when we listen to the transmitter, we receive the emitted value and can perform the actions we want. To start this listener , you need to trigger the . Subscribe () . Whenever a new value is sent, the code in the subscribe automatically executes-automatically responds.

// a simple example  function(Received value) {     //  can perform some functions according to the value })

　　　　

　　　　Redux's dispatch (action)

　　　　　　Redux's dispatch (action) function allows the app's state store to respond to its changes depending on the action type. Whenever an action is dispatch, the application state may be notconsistent.

// the application state is refreshed when the following code is triggered  ' man '})

　　　　

　　　　Epics function

　　　　　　The main functions of the epics function in redux-observable are: 1. Pass in an action and return a new, different action. 2. This epics function is a transmitter, so we can subscribe it to listen and receive a new action. 3. Every time we call Redux's dispatch, all the epics functions will execute.

function (action$: Observable<action>, Store:store): observable<action>;

　　　　

　　　　The internal principle of redux-observable

(1) Every time we use Redux's dispatch, each epics function receives the action we dispatch, and then the EPICS function returns a new action.

(2) Listen to the Epics function, return it to the new action, used to dispatch, thus updating the application state

 //  code representation is  function(newaction) {      //  Dispatch new Action})

　　　　

A simple example

//define two action creator//1. Pull a user's dataConst FETCHUSER = Username = = ({type: ' pull a user data ', target:username});//2. Pull CompleteConst Fetchuserdone = data = ({type: ' pull complete '), data});//define a epics functionConst Fetchepics = action$ =Action$.oftype (' Pull a user's data ')//if true, proceed to the next step or exit. Mergemap (action =//extracting Action.target and making Ajax requestsAjax.getjson ('/api/users/${action.target} '). Map (function(data) {Fetchuserdone (data)//Call Pull completion function, return {type: ' pull complete ', data}                 })        );  

　　　　From this example above we see:

(1) There is no longer an asynchronous action, that is, the Action,redux action of type function is pure object literal.

(2) The function of pulling the data is written in the epics function.

(3) The EPICS function will judge the type of action and will not be able to continue executing

(4) Note: The above Mergemap,Ajax, map These are the RXJS API.

　　Summarize

　　　　The advantages of redux-observable are probably these few, welcome to add. (1) Automatically responds to Redux's dispatch, and executes our defined epics function whenever the trigger is triggered. (2) Pull data and so on business logic code can be separated into the epics function, reduce the code coupling degree, improve maintenance (3) Action is pure object literal, no longer need to introduce redux-thunk.

　　　　

Redux-observable notes