@svr-tutorial-samples/basic-redux-saga-sample v1.0.1
basic-redux-saga-sample
This package show cases the integration of redux-saga with redux and react. This is a code sample companion for the article authored by me. click here for the companion article.
Intent
This is to provide a scafolding for redux-saga integration. This represents the final version after a number of iterations. I want to share my learnings which may benefit those who are just embarking on this journey.
Acknowledgements
Shout out to Jasmine Bamou ! The article click here authored by Jasmine Bamou was the source of inspiration for this endeavor. Thank You!
Introduction
The integration of redux saga is an ochestration between react-saga , redux , react , react-redux libraries . If you are not familar with these libraries , I would strongle encourage you to review the companion article here.
Fundamentals skip to next section
Only high level concepts are provided here for a comprehensive review click here.
What is middleware?
Middlleware has different connotations in the software arena. In this context, it acts as a interceptor between the consumer (the application) and the original recipient (API endpoint). The middleware in this case defers the dispatch to the redux store until the API request is fulfilled.
The need for middleware.
Since redux is synchronous and consuming REST API endpoints with asynchronous requests is the industry trend. The middleware serves to bridge the gap between redux and the deferred API response. Both redux-thunk and redux-saga are middleware.
What is redux saga?
How does saga work?
What are saga effects?
Usage Details skip to next section
The intent is to provide flavor of the scafolding for a saga-redux integration. Some aspects will probably need to be adjusted to meet your organization standards and conventions.
Steps
- Clone the repository to a local folder Open a terminal with VS Code or Bash and execute the following
- npm install
- npn run-script build
- npm run-script start
When all goes well you should see something similar to the below screenhot.
Code Walk Through
Orchestration steps
Step 1 source code: App.js
|
Step 2 source code: reducer/index.js
|
|
Step 3 source code: sagas/userSaga.js
|
|
Step 4 source code: store/config .js
|
|