How start to use Redux with a react-native project

What is Redux?

Redux is a predictable state container for JavaScript apps. It help you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

First Step: integrate redux lib

Before start to use redux in your app, you need install the packages using npm installer; ejecute next command: npm i redux redux-logger redux-promise-middleware redux-thunk redux-effex react-redux

package.json after npm install redux lib


redux-logger: is a logger for redux

redux-promise-middleware: Redux middleware for resolving and rejecting promises with conditional optimistic updates.

redux-thunk: Redux Thunk middleware allows you to write action creators that return a function instead of an action.

redux-effex: Spin off async functions to perform side effects.

react-redux: Official React bindings for Redux.

Second Step: File Tree

my redux file tree

Actions are payloads of information that send data from your application to your store. They are the onlysource of information for the store.

Reducers specify how the application’s state changes in response.

Effects using async/await to create async actions.

Store is the object that brings them together

Action Example

Reducer Example

Effex Example

Effex index file
Effex effect file

Store Example

Third Step: Applying Redux

Only need import your Store file and Provider (from react-redux).

Works OK