Redux-saga Basic Learning

Redux-saga Basic Learning

Reference:

Https://juejin.im/post/58eb4100ac502e006c45d5c9

Https://yanqiw.github.io/react/2017/03/05/redux-saga.html

Http://www.cnblogs.com/libin-1/p/6858558.html what is Redux-saga

It is a middleware for managing Redux application asynchronous operations by creating sagas to gather all the logic of asynchronous operations in one place, such as a decentralized extension in your application to resolve asynchronous actions (similar to processes running in the background), replacing Redux-thunk Middleware.

Logic exists in two places:

L Reducers is responsible for handling the state update of the action.

L Sagas is responsible for coordinating those complex or asynchronous operations. Important Concepts Side effects:

Actions that are executed after the action triggers the Reduser, including but not limited to, connecting to the network, IO reading and writing, triggering the other action. Because the side effects of sage are triggered by Redux action, each action,sage will be received as Reduser. And by triggering different action, we can control the state of these side effects, for example, start, stop, Cancel. So, we can understand that Sage is a module that can be used to handle complex asynchronous logic and is triggered by Redux's action.

Redux-saga provides several ways to produce side effects: There are two main types of takeevery and takelates.

Takeevery: New side effects continue to occur after the corresponding action is received. For example, to do a counter button, users need to constantly click on the button to update the background data, here you can use Takeevery to trigger.

Takelatest: When the same action is triggered multiple times, the previous side effects, if not done, are canceled, and only the side effects triggered by the last action can be executed.

Reduex can do:

L Call an asynchronous function;

L initiate an action to the Store;

L Start a background task or wait for a future action that satisfies certain conditions.

Effects

is a JavaScript object that contains information describing asynchronous actions that can be communicated to sagamiddleware through yield.

In the Redux-saga world, all Effect must be yield to execute.

Common APIs Call

Used to invoke asynchronous functions, pass asynchronous functions and function parameters as arguments to the call function, and return a JS object. Saga introduced his main role is to facilitate testing, but also to make our code more standardized.

The call operation is blocked and will not continue until promise comes back fork

When you invoke fork to start a task, the task continues in the background, allowing our execution stream to continue to execute without having to wait for return.

put

The effect is the same as the dispatch in Redux.

Yield put ({type: ' click_btn '});

Select

The action is the same as the getState in the Redux thunk.

CONST ID = Yield Select (state =>state.id);

When the Put method is invoked, the saga internally distributes the action notification Store update state.

Take

Wait for Redux dispatch to match a (user-determined) pattern action. Action is performed in the order that execution is executed to the take statement.

When you use the Take statement to wait for the action in Genetator, the generator is blocked, waits for the action to be distributed, and then continues to execute.

Wait for a button to click on the action, and then perform the button-click Saga:

while (true) {

Yield take (' Click_button ');

Yield fork (Clickbuttonsaga);

}

blocking calls and Non-blocking calls

Redux-saga can invoke the child saga with fork and call, where Fork is non-blocking and call is a blocking call.

Use examples:

When the user submits the form, we want to do the following things:

L Check some input information (simple, written in the component)

L Bounce Cue message (write a common message module so that other pages can be introduced)

L Submit back-end services (fetch in direct component)

L Get back-end return status (Promise implementation)

L Hide Hint information (add a control attribute to the build)

L Update Redux Store (Dispatch ... ）

But once multiple form submissions are involved, the code is long and repeats a lot of code.

After using the Redux-saga:

The form component triggers the commit action (a single line of dispatch)

Reducer This action doesn't have to be handled by itself.

Saga the side effects of submitting a form (monitor the action that triggers side effects)

L check.

L NOTIFY the Display Layer Bounce information box (dispatch the Change Control information box bouncing store)

L SUBMIT the form (yield a promis,yield is a javascriptgenerator syntax, later introduced)

L Get back-end return status

L Update Redux Store (Dispatch)

With Saga, react is only responsible for how the data is presented, Redux is responsible for the state of the data and binding data to the react, while saga handles most of the complex business logic.