Redux-saga Basic learning

Reference resources:

What is?Redux-saga

It is a management Redux Apply asynchronous operation
Middleware, By creating Sagas  Gather all asynchronous operation logic in one place for centralized processing, It's like a decentralized branch that is responsible for asynchronous solution in your applicationaction( Similar to a process running in the background), Thus replace redux-thunk  middleware.


Logic exists in two places:

l  Reducers Responsible for handling action Of state To update.

l  Sagas Responsible for coordinating complex or asynchronous operations.

Important concepts

Side effect:

stayaction triggerreduser Some actions to be performed later, These actions include, but are not limited to, Connection network,io Read and write, Trigger otheraction. becauseSage The side effect is throughredux Ofaction Triggered, Every lastaction,sage Will be likereduser Same as received. And by triggering differentaction,
We can control the state of these side effects, for example, start-up, Stop it, cancel. therefore, We can understand it asSage Is a module that can be used to handle complex asynchronous logic, And byredux Ofaction trigger.

redux-saga Provides several ways to produce side effects: There are two main types usedtakeEvery andtakeLates.

takeEvery: Will receive the correspondingaction And then there are new side effects.
such as, Make a counter button, Users need to click the button continuously, Update background data, Here you can usetakeEvery Trigger.

takeLatest: In the same wayaction When triggered multiple times, If the previous side effects are not completed, Will be cancelled, Only for the last timeaction The triggered side effects can be completed.



Reduex Can do:

l  Call an asynchronous function;

l  Launch a action reach Store;

l  Start a background task or wait for a future action.



It is a javascript object, It contains information describing asynchronous actions, Can pass yield Convey to sagaMiddleware implement.

stay redux-saga In the world, Be-all Effect Must be yield Will execute


Commonly usedAPI


Used to call asynchronous functions, Use asynchronous functions and function parameters ascall Function's arguments passed in, Return to onejs object.saga The main purpose of introducing him is to facilitate testing, At the same time, it can also make our code more standardized.

call Operation is blocked, Only waitpromise You can't continue until you get back


When calledfork When starting a task, The task continues in the background, So that our execution flow can continue to execute without waiting for the return.




Function and redux Medium dispatch identical.

yield put({ type: 'CLICK_BTN' });



Function and redux thunk Medium getState identical.

const id = yield select(state =>;

callput After method,saga Internal distributionaction noticeStore To updatestate.



wait for redux dispatch Match a certain( At the user's discretion) pattern Of action . In the execution order totake Statementaction.

staygenetator Use intake Sentence waitingaction Time,generator Blocked, wait foraction Be distributed, And then move on.

Wait for a button to click action , Then execute the saga:

while (true) {

 yield take('CLICK_BUTTON');

 yield fork(clickButtonSaga);




Blocking and non blocking calls

redux-saga Can use fork and call Invocation saga , among fork Is a non blocking call,call Is a blocking call.


Use example:

When the user submits the form, We want to do the following:

l  Verify some input information ( simple, Write in component)

l  Pop up message( Write a common prompt module, So that other page introductions can be used)

l  Commit backend services ( In the direct componentfetch)

l  Get the back end and return to the status (promise Realization)

l  Hide tips ( Add a control attribute to the build)

l  To updateredux store(dispatch Slightly...)

But once multiple form submissions are involved, The code will be long, A lot of repetitive code.

Usedredux-saga after:

form Component trigger commitaction ( One line simpledispatch)

reducer thisaction You don't have to deal with it yourself

saga Side effects of submission form start execution ( Monitoring to trigger side effectsaction)

l  Check it out.

l  Notification display layer pop up information box (dispatch The change control information box pops upstore)

l  Submit Form (yield Onepromis,yield yesjavascriptgenerator Syntax, Later on)

l  Get the back end and return to the status

l  To updateredux store(dispatch Once)


UsedSaga after,react Only responsible for data presentation,redux To be responsible for data status and binding data toreact, andSaga Handles most of the complex business logic.