Redux and redux persist complete example using mapstatetoprops and mapDispatchToProps saving objects

 app.js

import React from 'react';
import { } from 'react-native';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';
import { persistor, store } from './redux/Store';
import Screen1 from './Components/screen1';
// import Screen2 from './Components/screen2'
// import Index1 from './Components/Screen2';
import Screen5 from './Components/Screen5';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import 'react-native-gesture-handler';

const App = () => {
  const Stack = createStackNavigator();
  //   const allscreens = () => {
  //     return (
  //  );
  //   };
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor} loading={null}>
        <NavigationContainer>
          <Stack.Navigator>
          <Stack.Screen name="Screen1" component={Screen1} />
            <Stack.Screen name="Screen5" component={Screen5} />
          </Stack.Navigator>
        </NavigationContainer>
      </PersistGate>
    </Provider>
  );
};

export default App;

*******************************************************************************
screen1
index.js
import React, { useEffect, useState } from 'react';
import { View, Text, Button, TextInput, FlatList } from 'react-native';
import style from './styles';
// import { useNavigation } from '@react-navigation/native';

import {
    increment,
    decrement,
    incrementvalue,
    decrementvalue,
    sendData,
} from '../../redux/actions/AuthActions';
import { connect } from 'react-redux';
// import Screen2 from '../Screen2';
const Screen1 = (props) => {
    useEffect(() => {
        console.log(props.Myarra);
    }, [props.Myarra]);
    const [weight, setweight] = useState('')
    const [age, setage] = useState(0)

    // const gotoscreen2=()=>{
       
    // }

   
    return (
        <View style={style.container}>
            <Button onPress={() => props.PlusMyvalue()} title="+" />
            <TextInput placeholder="enter age" style={style.inputweight} onChangeText={(val)=>setweight(val)}/>
            <TextInput placeholder="enter age" style={style.inputage}  onChangeText={(val)=>setage(val)}/>
            <Button
                onPress={() => {
                    let schooldata = {
                        WEIGHT: weight,
                        AGE: age,
                    };
                    props.school(schooldata);
                }}
                title="send data"
            />
            <Text style={style.txt}>{props.Mydata}</Text>
            {/* <Button onPress={()=>props.mizasMyvalue()} title="-"/> */}
    <Button title="dataScreen" onPress={()=>props.navigation.navigate('Screen5')}/>
            {/* <FlatList
        data={props.Myarra}/> */}
            {/* <FlatList
                data={props.Myarra}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({ item }) => <Text>{item.WEIGHT},{item.AGE}</Text>}
            /> */}
        </View>
    );
};
// s
// export default Screen1;

function mapStateToProps(state) {
    return {
        Mydata: state.auth.count,
        Myarra: state.auth.myarray,
    };
}
function mapDispatchToProps(dispatch) {
    return {
        // PlusMyvalue: ()=> dispatch(incrementvalue()),
        // mizasMyvalue: ()=> dispatch(decrementvalue()),
        school: payload => dispatch(sendData(payload)),
    };
}
export default connect(mapStateToProps, mapDispatchToProps)(Screen1);

screen1
styles.js
import { StyleSheet } from "react-native";

const style = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'skyblue'
    },
    txt:{
        alignSelf:'center',
        fontSize:50
    },
    input:{
        // backgroundColor:'green',
        borderWidth:5,
        textAlign:'center'
    }
})

export default style;
*********************************************************************************
screen5
index.js
import React,{useEffect} from 'react';
import {View, Text,FlatList} from 'react-native';
import styles from './styles';
import { connect } from 'react-redux';
const Screen5 = (props) => {
    useEffect(() => {
        console.log(props.Myarra);
    }, [props.Myarra]);
  return (
    <View style={styles.container}>
      <FlatList
        data={props.Myarra}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) => (
          <Text>
            {item.WEIGHT},{item.AGE}
          </Text>
        )}
      />
    </View>
  );
};
function mapStateToProps(state) {
  return {
    // Mydata: state.auth.count,
    Myarra: state.auth.myarray,
  };
}
function mapDispatchToProps(dispatch) {
  return {
    // PlusMyvalue: ()=> dispatch(incrementvalue()),
    // mizasMyvalue: ()=> dispatch(decrementvalue()),
    school: payload => dispatch(sendData(payload)),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Screen5);

screen5
styles.js
import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'yellow'
    }
})

export default styles
********************************************************************
Redux folders structure
*********************************************************************
Redux (folder)
actions (folder) AuthActions.js in actions folder
reducers (folder) authReducers.js in reducers folder
rootReducer.js (file)
Store.js (file)
types.js (file)
*********************************************************************

*******************************************************************
AuthActions.js

import {
INCREMENT,DECREMENT, SCHOOL
} from '../types';

// export const LanguageType = (language) => ({
//     type: LANGUAGE,
//     payload: language,
// });

// export const increment = (num) => ({
//     type: INCREMENT,
//     payload: num,
// });
// export const decrement = (num) => ({
//     type: DECREMENT,
//     payload: num,
// });

export const incrementvalue=()=>({
    type:INCREMENT
})
export const decrementvalue=()=>({
    type:DECREMENT
})


export const sendData=(data)=>({
type:SCHOOL,
payload:data

})
*******************************************************************
authReducers.js

import { INCREMENT, DECREMENT , SCHOOL} from '../types';

const initialState = {
    count: 0,
    myarray:[]
};

export default function (state = initialState, action) {
    switch (action.type) {
        case INCREMENT:
            console.log(' i am called');
            return {
                ...state,
                count:state.count+1
            };

        case DECREMENT:
            console.log(' i am Decrement');
            return {
                ...state,
                count:state.count-1,
            };

            case SCHOOL: // [{asasa},{sasa}]
                let DummyArray= [...state.myarray, action.payload]
               
                 return{
                    ...state,
                    myarray: DummyArray
                 }

        default:
            return state;
    }
}
*******************************************************************
rootReducer.js

import { combineReducers } from 'redux';
import authReducers from './reducers/authReducers';

const rootReducer = combineReducers({
    auth: authReducers,
});
export default rootReducer;

*******************************************************************
Store.js

// import AsyncStorage from '@react-native-community/async-storage';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import rootReducer from './rootReducer';

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    whitelist: ['auth'],
    blacklist: [''],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer, applyMiddleware(thunk));
let persistor = persistStore(store);
export { store, persistor };
*******************************************************************
types.js
export const LANGUAGE = 'LANGUAGE'
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
export const SCHOOL = 'SCHOOL'
*******************************************************************
*******************************************************************
package.json
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.66.2",
    "@react-native-async-storage/async-storage": "^1.15.9",
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0",
    "react-redux": "^7.2.5",
    "redux": "^4.1.1",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0"
  },


Comments

Post a Comment

Popular posts from this blog

Privacy Policy for Live Weather Forecast - Realtime app

  Privacy Policy SMA Creative Studio built the Live Weather Forecast - Realtime app as a Free app. This SERVICE is provided by SMA Creative Studio at no cost and is intended for use as is. This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service. If you choose to use my Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that I collect is used for providing and improving the Service. I will not use or share your information with anyone except as described in this Privacy Policy. The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which are accessible at Live Weather Forecast - Realtime unless otherwise defined in this Privacy Policy. Information Collection and Use For a better experience, while using our Service, I may require you to provide us with certain personally identif...
Read more

NFC Checker App Privacy Policy

  Privacy Policy SMA Creative Studio built the NFC Checker app as a Free app. This SERVICE is provided by SMA Creative Studio at no cost and is intended for use as is. This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service. If you choose to use my Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that I collect is used for providing and improving the Service. I will not use or share your information with anyone except as described in this Privacy Policy. The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which are accessible at NFC Checker unless otherwise defined in this Privacy Policy. Information Collection and Use For a better experience, while using our Service, I may require you to provide us with certain personally identifiable information. The information that I ...
Read more

FlatList

 app.js import React , { useState } from 'react' ; import {   StyleSheet ,   View ,   Text ,   ScrollView ,   Platform ,   SafeAreaView ,   FlatList ,   TouchableOpacity , } from 'react-native' ; const App = () => {   const items = [     { id: 1 , name: 'imran' , age: 32 },     { id: 2 , name: 'kamran' , age: 22 },     { id: 3 , name: 'jabeel' , age: 14 },     { id: 4 , name: 'code' , age: 44 },     { id: 5 , name: 'with' , age: 78 },     { id: 6 , name: 'harry' , age: 32 },     { id: 7 , name: 'hellos' , age: 31 },     { id: 8 , name: 'majid' , age: 29 },     { id: 9 , name: 'sher' , age: 24 },     { id: 10 , name: 'muhammad' , age: 22 },     { id: 11 , name: 'asnari' , age: 32 },     { id: 12 , name: 'kamran' , age: 22 },     { id: 13 , name: 'jabeel' , age...
Read more