Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
redux saga
A role.
Redux Saga: Used to handle application side effects such as asynchronously retrieving data and interface calls, as a piece of redux middleware with access to Redux’s state and Dispatch actions.
Two. Basic use
1. Create a saga.js file
1) Create Saga
2) It is necessary that all saga can be implemented at the same time
TakeLatest: In this case, only one task is allowed to execute, and the executed task is the last one to be started. If there is a task that does not finish before it, it will be cancelled.
All: Similar to the all operation in Promise, it provides a way to execute asynchronous requests in parallel. Multiple asynchronous operations can be entered as parameters in the ALL function. If one call operation fails or all call operations return successfully, the all operation is complete.
To add a rootSaga, add more than one saga in the following way and start all the saga contained in it at the same time.
1) Introduce saga
Use the Redux-Saga module’s createSagaMiddleware factory function to create a SagaMiddleware.
Before running rootSaga, we must connect middleware to Store using applyMiddleware. Then run Saga with sagamiddleware.run ().
1) Create the file saga.spec.js
IncrementAsync is a Generator function. Return an iterator object. The iterator’s next method returns an object of the following format:
Call, like PUT, returns an Effect object that tells middleware to call a given function with a given parameter. In fact, neither put nor Call performs any dispatch or asynchronous calls; they simply return plain Javascript objects (JS text objects).
Middleware examines the type of Effect that is being yielded and then decides how to implement which Effect.
If Effect is PUT, middleware dispatches an action to a Store.
If the Effect type is CALL, it calls the given function.
3) the NPM test
Concept of three.
- TakeEvery: takeEvery allows multiple task instances to start at the same time. At a certain point, we can start a new task even though one or more tasks have not yet finished.
2. TakeLatest: Only one task can be executed at any time, although its previous tasks will be cancelled before they are completed, ensuring that each task executed is the latest one.
- Effects
Redux-saga provides several effects Objects, such as call and PUT, for the purpose that the Generator will yield plain Objects containing instructions. Redux-saga Middleware ensures that these commands are executed and feeds the results of the commands back to the Generator. Thus, when testing the Generator, all we need to do is yield the object with a simple deepEqual to check that it yields the instruction we expect.
1) Call means to call an asynchronous function, which is used to call the interface and supports promise
2) Put stands for dispatch action, which is used to trigger action
Error handling
1. Catch errors in Saga using the familiar try/catch syntax
Take and take every
Take, like takeEvery, listens for an action, but unlike takeEvery, it does not respond every time an action is triggered, but only when the execution order reaches the take statement.
1) takeEvery simply listens for each action and executes the handler. TakeEvery has no control over when and how to respond to an action.
2) Take is not the same. In generator functions we can decide when an action is appropriate and what to do when an action is triggered.
Non-blocking calls
Fork: When we fork a task, the task is started in the background and the caller can continue its own process without waiting for the forked task to finish.
The fork and cancel
Fork and Cancel are usually used together to implement a non-blocking task. Take is blocked, which means the implementation cannot proceed further while performing a take. Fork is non-blocking, and you can also cancel a fork with cancel
Execute yield fork(authorize, user, password) and yield take([‘LOGOUT’, ‘LOGIN_ERROR’])
Perform multiple tasks synchronously
The execution of the second yield is not performed until the execution of the first yield is completed, so if you want to execute multiple tasks synchronously, you should write as follows:
8. Multiple effects directly start race
Sometimes we start more than one task at a time, but don’t want to wait for everything to finish, we just want the winner: the first task to be resolved (or reject). The Race Effect provides a method similar to the promise.race method
9. Cancel the mission
1) Manually cancel
yield cancel(task)
This method does not wait for canceled tasks to complete. CancelEffect behaves somewhat like fork. Once uninitiated, it returns as soon as possible. Once canceled, the task should usually complete its cleanup logic as soon as possible and then return.
2) Automatic cancellation
Race Effect: All tasks except resolve or Reject are cancelled first
All: Once a task is rejected, others are rejected.
Use channels
ActionChannel: When multiple actions are triggered, this Helper Effect can cache incoming messages and process them in sequence if there is a block in front of them.
Buffers: Controls the number of buffers. If you want to process only the last five stored messages, you can use the following method.
Eleven, using skills
1, throttle:
Introduce a delay function as follows:
The Saga accepts at most one INPUT_CHANGED action for 500ms and can continue processing the trailing action.
2, if you
1) Introduce delay function
You can put a built-in delay in tasks that are forked
2) You can use takeLatest