Redux, Reactotron, Actions, Reducers and Sagas (2)
A continuation of my old post. Please make sure that you have gone through the previous post before getting started here. Redux, Store, Actions, Reducers and logger: Get Started and a little further.
This post will help you get started with redux-saga
and reactotron
inside a react-native
app.
Content
- Get Started
- How does it work?
- Structure
- Redux
- Configurations
- Store
- Component
- Conclusion
Get Started
You can either follow this post OR directly get the final code from my github repo. here.
Let’s start by uninstalling the packages. (Ignore if you ignored the previous post 😛):
Uninstall redux-thunk
and redux-logger
(Removing the logger as reactatoron will log the saga effects as well.)
Now let’s install saga and reactotron helpers.
npm install --save redux-saga
npm install --save-dev reactotron-apisauce reactotron-react-native reactotron-redux-saga
How does it work?
- User types something
- onTextChange calls the action
- Action dispatched to store
- Pulled by a watcher saga
- Watcher calls worker
- Worker does the logic part(if any) and later calls an effect (put in this case)
- New object with type and payload sent to all reducers
- Reducers calculate new app state
- State sent to all components
- Component re-renders with new props (using connect helper from react-redux)
- Wait for new change
- Repeat
Structure
- index.js
- src/
- components/
- CustomTextInput.js
- redux/
- actions/
- reducers/
- sagas/
- store/
- types.js
- App.js # Entry point ...
Redux
types.js
Actions
index.js
export * from './CustomTextInputActions';
CustomTextInputActions.js
Sagas
- What is redux-saga? ReadMe
- Effects: DeclarativeEffects
- Watcher/Worker: #Watcher/Worker
index.js
CustomTextInputSagas.js
Watchers are the sagas who watch for any action that is dispatched to the store and then they delegate an action to a worker saga.
- Watcher: Will watch for dispatched actions and fork a worker on every action
- Workers: Process the code (business logic/ API calls) or even call other workers, handle the action and terminate
Configurations
Make the configuration file for reactotron
Reactotron will display the logs and calls for Saga effects
, AsyncStorage
and API calls
.
configs.js
Store
Since we are using Saga
now, we need to update the store.
index.js
Component
CustomTextInput.js
Conclusion
Thank you for reading this post — I hope you found this helpful. You can find me on GitHub, LinkedIn and CodeMentor. If you have any questions, feel free to reach out to me!
Want to read more?
Originally published at www.codementor.io.