React-Native-Navigation WIX | Redux

React-Native-Navigation WIX | Redux simple counter example of redux + react-native-navigation 

...................................................................................................................................................................
install two library

yarn add react-native-navigation
yarn add redux react-redux

...................................................................................................................................................................

Project Structure

...................................................................................................................................................................

actions

1. actionTypes.js

import {DECREMENT, INCREMENT } from '../constants/Type'

export const Increment=()=>{
    return{
        type:INCREMENT
    }
}

export const Decrement =()=>{
    return{
        type:DECREMENT
    }
}
...................................................................................................................................................................

components

2. counterComponent.js

import React, { PureComponent } from 'react'
import { View, Text, Button, } from 'react-native'

class CounterComponent extends PureComponent {
    static get options() {
        return {
            topBar: {
                title: {
                    text: 'Redux wix',
                    fontSize: 30,
                    color: '#000',
                    alignment:'center'
                },
                background:{
                    color:'red'
                }
            }
        }
    }
    render() {
        return (
            <View>
                <Text style={{ fontSize: 30, color: 'red' }}>{this.props.result}</Text>
                <Button title='Increment' onPress={() => this.props.Inc()} />
                <View style={{ marginTop: 30 }}>
                    <Button title='Decrement' onPress={() => this.props.Dec()} />
                </View>
            </View>
        )
    }
}

export default CounterComponent

...................................................................................................................................................................

constants

3. Type.js

export const INCREMENT ='INCREMENT'
export const DECREMENT = 'DECREMENT'

...................................................................................................................................................................

container

4. counterContainer.js

import { connect } from 'react-redux'
import CounterComponent from '../components/counterComponent'
import {Increment, Decrement } from '../actions/actionType'

const mapStateToProps=(state)=>{
    return{
            result:state.nav.count
    }
}

const mapDispatchToProps=(dispatch)=>{
    return{
        Inc:()=>dispatch(Increment()),
        Dec:()=>dispatch(Decrement())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent)

...................................................................................................................................................................

reducers

5.1 counterReducer.js

import { DECREMENT, INCREMENT } from '../constants/Type'

const initialState ={
    count:0
}

const counterReducer=(state=initialState, action)=>{
    switch(action.type){
        case 'INCREMENT':
        return{
            ...state,
            count: state.count+1
        }
        case 'DECREMENT':
        return{
            ...state,
            count: state.count -1
        }
        default:
        return state
    }

}

export default counterReducer


..................................................................................................................................................................

5.2 rootReducer.js

import { combineReducers } from  'redux'
import counterReducer from './counterReducer'

const rootReducers = combineReducers({
    nav: counterReducer
})

export default rootReducers

...................................................................................................................................................................

index.js

import { Navigation } from 'react-native-navigation'

import { createStore } from 'redux'
import { Provider } from 'react-redux'

import counterContainer from './src/container/counterContainer';
import rootReducers from './src/reducers/rootReducer';

const store = createStore(rootReducers)

Navigation.registerComponentWithRedux('counterContainer', ()=>counterContainer, Provider,store)

Navigation.events().registerAppLaunchedListener(()=>{
  Navigation.setRoot({
    root:{
      stack:{
        children:[{
          component:{
            name:'counterContainer'
          }
        }]
      }
   
    }

  })
})
...................................................................................................................................................................

run:- react-native run-android