React native in Redux | flow and create a Counter app with Redux

React native in Redux | flow and create a Counter app with Redux

reducer return a state

App.js

import React, { Component } from 'react'

import { View, Text } from 'react-native'

import { createStore } from 'redux'

import { Provider } from 'react-redux'

const reducer = (store = {}) => {

  return {

    name: 'Sapan Kumar Das'               <== return an object

  }

}

const store = createStore(reducer)

console.log(store)    <== undefind means applicaion does not have state

console.log(store.getState())

class App extends Component {

  render() {

    return (

      <Provider store={store}>

      </Provider>

    )

  }

}

export default App

Happy Coding :)

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

How to get the update state

update the state, we need to dispatch actions

let's me know how to create actions, actions is a plain javaScript object with minimum two things one type and payload.

store.dispatch({

type:'UPDATE-STATE,

payload: 'Johan Doe'

})

Every reducer excepts two things which is state and actions

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

const reducer = (state = { name: 'Sapan ' }, {type, payload} )=> {
  switch (type) {
    case "UPDATE_NAME":
      return {
        ...state,
        name: payload
      }
    default:
      return state
  }
}

const store = createStore(reducer)
console.log("INitial State",store.getState())

store.dispatch({
  type: "UPDATE_NAME",
  payload: 'Johan'
})
console.log(store.getState())

class App extends Component {
  render() {
    return (
      <Provider store={store}>

      </Provider>
    )
  }
}
export default App

Happy Coding :)

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

Happy Coding :)

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

Happy Coding :)

Project

actions

1.1 Types.js

export const INCREMENT = 'INCREMENT'

export const DECREMENT ='DECREMENT'

1.2 actionTypes


import { INCREMENT, DECREMENT } from './Types'

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


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

}

_______________________________________________________________________________

Components

2.1 counterComponent.js


import React, { Component } from 'react'
import { View, Text, TouchableOpacity } from 'react-native'

class CounterComponent extends Component{
    render(){
        return(
            <View style={{flex:1}}>
                <Text style={{fontSize:50, color:'blue'}}>
                {this.props.make}
                </Text>
                <View style={{flexDirection:'row', marginLeft:20}}>
                <TouchableOpacity onPress={()=> this.props. Increment()}>
                    <Text style={{fontSize:50}}>+</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=> this.props.Dcrement()}>
                    <Text style={{fontSize:50, marginHorizontal:20}}>-</Text>
                </TouchableOpacity>
                </View>
               
            </View>
        )
    }
}


export default CounterComponent

2.2 containers.js

import { connect } from 'react-redux'
import CounterComponent from '../components/counterComponent'
import {getIncrement, getDecrement } from '../actions/actionTypes'


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

const mapDispatchToProps =(dispatch)=>{
    return{
        Increment : ()=>{
            dispatch(getIncrement())
        },

        Dcrement : ()=>{
            dispatch(getDecrement())
        }
    }
}
const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(CounterComponent)

export default CounterContainer

_____________________________________________________________________________

reducers

3.1 counterReducer.js

import {INCREMENT, DECREMENT } from '../actions/Types'

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

3.2 Index.js

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


const RootReducer = combineReducers({
    nav:CounterReducer
})


export default RootReducer


app.js

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { Provider } from 'react-redux'
import RootReducer from './src/reducers/Index'
import { createStore } from 'redux'
import CounterContainer from './src/containers/counterContainer'

const store= createStore(
    RootReducer
)


export default class App extends Component{
    render(){
        return(
            <Provider store={store}>
<CounterContainer/>
            </Provider>

        )
    }

}

flow

Display

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

Example 2

constants/languages.js

export const languages = {
    english: {
        hello: 'Hello'
    },
    japanese: {
        hello: 'Konnichiwa'
    },
    french: {
        hello: 'Bonjour'
    },
    australian: {
        hello: 'G\'day!'
    }

}

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

actions/index.js

export const selectLanguage = (val) => {
    return {
        type: 'language_data',
        payload: val
    }

}

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

reducers/reducer.js

import { languages } from '../constants/languages'

const INITIAL_STATE = languages.english;

const reducer = (state = INITIAL_STATE, action) => {

    switch (action.type) {

        case 'language_data':

            return action.payload;

        default:

            return state;

    }

}

export default reducer

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

components/Home.js

import React, { Component } from 'react'

import { connect } from 'react-redux'

import { selectLanguage } from '../actions/index'

import { View, Text, TouchableOpacity } from 'react-native'

import { languages } from '../constants/languages'

class Home extends Component {

    render() {

        const { hello } = this.props.selectedLanguage;

        return (

            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

                <View style={{ padding: 20 }}>

                    <Text style={{ fontSize: 30, fontWeight: 'bold' , color:'red'}}>{hello}</Text>

                </View>

                <View style={{ padding: 20 }}>

                    <TouchableOpacity onPress={() => this.props.selectLanguage(languages.english)}>

                        <Text>English</Text>

                    </TouchableOpacity>

                    <TouchableOpacity onPress={() => this.props.selectLanguage(languages.japanese)}>

                        <Text>Japanese</Text>

                    </TouchableOpacity>

                    <TouchableOpacity onPress={() => this.props.selectLanguage(languages.french)}>

                        <Text>French</Text>

                    </TouchableOpacity>

                    <TouchableOpacity onPress={() => this.props.selectLanguage(languages.australian)}>

                        <Text>Australian</Text>

                    </TouchableOpacity>

                </View>

            </View>

        );

    }

}

const mapStateToProps = state => {

    return {

        selectedLanguage: state.all,

    }

}

export default connect(mapStateToProps, { selectLanguage })(Home);

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

App.js

import React, { Component } from 'react'

import { View, Text } from 'react-native'

import { createStore, combineReducers } from 'redux'

import { Provider } from 'react-redux'

import Home from './src/components/Home'

import reducer from './src/reducer/reducer'

const RootReducer = combineReducers({

    all: reducer

})

const store= createStore(RootReducer)

export default class App extends Component{

    render(){

        return(

            <Provider store= {store}>

                <Home/>

            </Provider>

        )

    }

}

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

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