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?

Redux, Store, Actions, Reducers and logger: Get Started and a little further (1)

Preventing React-Navigation Multiple Screen Instances

Originally published at www.codementor.io.