Redux-saga Basic learning

reference resources :

What is? Redux-saga

It is a management Redux Apply asynchronous operation
Middleware of , 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 application action( Similar to a process running in the background ), Instead of  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 .

Key concepts

side effect :

stay action trigger reduser Some actions to be performed later , These actions include, but are not limited to , Connect to the network ,io Reading and writing , Trigger other action. because Sage The side effect is through redux Of action Triggered , every last action,sage Will be like reduser Same as received . And by triggering different action,
We can control the state of these side effects , for example , start-up , stop it , cancel . therefore , We can understand it as Sage Is a module that can be used to handle complex asynchronous logic , And by redux Of action trigger .

redux-saga Provides several ways to produce side effects : There are two main types used takeEvery and takeLates.

takeEvery: Will receive the corresponding action 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 use takeEvery To trigger .

takeLatest: In the same action When triggered multiple times , If the previous side effects are not completed , Will be cancelled , Only for the last time action 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's a javascript object , It contains information describing asynchronous actions , Through yield To sagaMiddleware implement .

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


Common API


Used to call asynchronous functions , Use asynchronous functions and function parameters as call Function's arguments passed in , Return to a js 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 , Just wait promise You can't continue until you get back


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




Role and redux In dispatch identical .

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



Role and redux thunk In getState identical .

const id = yield select(state =>;

call put After method ,saga Internal distribution action notice Store to update state.



wait for redux dispatch Match a ( At the user's discretion ) pattern Of action . In the execution order to take Statement action.

stay genetator Used in take Statement wait action Time ,generator Blocked , wait for action 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 It can be used fork and call To call the saga , among fork Is a non blocking call ,call Is a blocking call .


Examples of use :

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 component fetch)

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

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

l  to update redux store(dispatch Slightly ...)

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

Used redux-saga after :

form Component trigger commit action ( One line simple dispatch)

reducer this action You don't have to deal with it yourself

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

l  Check it out

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

l  Submit Form (yield One promis,yield yes javascriptgenerator Grammar of , Later on )

l  Get the back end and return to the status

l  to update redux store(dispatch once )


Used Saga after ,react Only responsible for data presentation ,redux To be responsible for data status and binding data to react, and Saga Handles most of the complex business logic .