diff --git a/README.md b/README.md index c77f11b..f258f96 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,36 @@ -# react-native-redux-examples -This repository contains several Redux and Redux Recompose examples for React Native +# React Native Redux Examples + +This repository contains the implementation of a simple React Native application developed across several blog entries at [julioecheverri.com](http://www.julioecheverri.com). + +The content of this repository is mainly intended to illustrate some basic skills on **configuring**, **managing**, **persisting** and **monitoring** a simple **Redux** state on our _React Native Application_. + +### The Application +The app we develop in this repository consists on a **counter** that increases or decreses its value based on two buttons that the user can press at any time (see UI below). + +React Native Counter App + +The app works this way: + +Counter App Working + +### This implements the following branching rules: + +- Each branch implements a specific feature/tutorial from [julioecheverri.com](http://www.julioecheverri.com). +- All branches in this repo are related to Redux and they are respectively linked in the corresponding [julioecheverri.com](http://www.julioecheverri.com) post. +- The `main` branch keeps the latest changes in the repository, i.e. the most advanced version of the example app is found in this branch. + +### Branches description + +- #### adding-redux: + In this branch we add `redux`, `redux-recompose` and `react-redux` to our newly created React Native (Typescript) project. In this branch the app implements a basic counter that increase/decrease based on two buttons that dispatch a basic action to Redux and updates the counter. +- #### module-resolver: + In this branch we add `babel-plugin-module-resolver` to the project and update the settings and the `import` notation in source files. +- #### redux-reactotron: + In this branch we install and configure `Reactotron` to monitor the _Redux_ state and log info from the app. +- #### redux-persistence: + In this branch we configure and manage Redux state persistence in the device's filesystem using `async-storage` and `reedux-persist`. + + + + **Copyright** + Julio César Echeverri Marulanda diff --git a/public-images/react-native-redux-counter.png b/public-images/react-native-redux-counter.png new file mode 100644 index 0000000..c21a13d Binary files /dev/null and b/public-images/react-native-redux-counter.png differ diff --git a/public-images/redux-recompose-react-native.gif b/public-images/redux-recompose-react-native.gif new file mode 100644 index 0000000..b6ba526 Binary files /dev/null and b/public-images/redux-recompose-react-native.gif differ diff --git a/src/app/components/CustomButton/index.tsx b/src/app/components/CustomButton/index.tsx index 1fac290..4ae985d 100644 --- a/src/app/components/CustomButton/index.tsx +++ b/src/app/components/CustomButton/index.tsx @@ -7,9 +7,9 @@ import { ImageStyle, PressableStateCallbackType, } from 'react-native'; +import {primary, primaryHighLight} from '@constants/colors'; import styles from './styles'; -import {primary, primaryHighLight} from '../../constants/colors'; interface Props { style?: ViewStyle; diff --git a/src/app/styles.ts b/src/app/styles.ts index afdfdb9..6e50961 100644 --- a/src/app/styles.ts +++ b/src/app/styles.ts @@ -1,6 +1,5 @@ import {StyleSheet} from 'react-native'; - -import {primary} from './constants/colors'; +import {primary} from '@constants/colors'; export default StyleSheet.create({ safearea: { diff --git a/src/redux/counter/actions.ts b/src/redux/counter/actions.ts index 6a6ab3d..0d717a5 100644 --- a/src/redux/counter/actions.ts +++ b/src/redux/counter/actions.ts @@ -1,5 +1,5 @@ import {createTypes} from 'redux-recompose'; -import {Action} from '../../interfaces/reduxInterfaces'; +import {Action} from '@interfaces/reduxInterfaces'; export const actions = createTypes(['UPDATE_COUNTER'], '@@COUNTER'); diff --git a/src/redux/counter/reducer.ts b/src/redux/counter/reducer.ts index 7bbd66e..65240ad 100644 --- a/src/redux/counter/reducer.ts +++ b/src/redux/counter/reducer.ts @@ -1,5 +1,5 @@ import {createReducer} from 'redux-recompose'; -import {CounterState, Action, State} from '../../interfaces/reduxInterfaces'; +import {CounterState, Action, State} from '@interfaces/reduxInterfaces'; import {actions} from './actions'; diff --git a/src/redux/store.ts b/src/redux/store.ts index 1d81689..4bc667b 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -1,5 +1,6 @@ import {createStore, combineReducers} from 'redux'; -import {State} from '../interfaces/reduxInterfaces'; +import {State} from '@interfaces/reduxInterfaces'; + import counter from './counter/reducer'; const reducers = combineReducers({