counter_with_redux
app.js
import React from 'react';
import {} from 'react-native';
import ScreenA from './ScreenA/index';
import {Provider} from 'react-redux';
import { store ,persistor} from './redux/Store';
// import { PersistGate } from 'redux-persist/integration/react';
import { PersistGate } from 'redux-persist/lib/integration/react';
const App = () => {
return (
<Provider store={store}>
<PersistGate persistor={persistor} loading={null}>
<ScreenA />
</PersistGate>
</Provider>
);
};
export default App;
***************************************************************************************************************************************
ScreenA
index.js
import React, { useState } from 'react';
import { View, Text, Pressable, TextInput } from 'react-native';
import styles from './styles';
import { connect } from 'react-redux';
import {
increment,
decrement,
incrementvalue,
decrementvalue,
} from '../redux/actions/AuthActions';
const ScreenA = props => {
const [count, setcount] = useState(1)
return (
<View style={styles.container}>
<Text style={styles.header}>Counter App With Redux</Text>
<Text style={styles.counttxt}>{props.Mydata}</Text>
<View style={styles.btnView}>
<Pressable
style={styles.presView1}
onPress={() => props.mizasMyvalue()}>
<Text style={styles.txt1}>--,{count}</Text>
</Pressable>
<Pressable style={styles.presView2} onPress={() => props.PlusMyvalue(count)}>
<Text style={styles.txt2}>++</Text>
</Pressable>
</View>
<TextInput style={styles.input} keyboardType="phone-pad" placeholder="plus by amount" onChangeText={(val)=>setcount(val)}/>
</View>
);
};
function mapStateToProps(state) {
return {
Mydata: state.auth.count,
Myarra: state.auth.myarray,
};
}
function mapDispatchToProps(dispatch) {
return {
PlusMyvalue: (payload) => dispatch(incrementvalue(payload)),
mizasMyvalue: () => dispatch(decrementvalue()),
school: payload => dispatch(sendData(payload)),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(ScreenA);
ScreenA styles.js
import {StyleSheet} from 'react-native';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'green',
},
btnView: {
alignSelf: 'center',
flexDirection: 'row',
},
presView1: {
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
height: hp(10),
width: wp(30),
backgroundColor: 'yellow',
marginRight:wp(5)
},
presView2: {
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
height: hp(10),
width: wp(30),
backgroundColor: 'red',
},
txt1:{
fontSize:hp(7)
},
txt2:{
fontSize:hp(7)
},
header:{
alignSelf:'center',
fontSize:hp(4),
fontWeight:'bold',
color:'white'
},
counttxt:{
color:'#ffff',
fontSize:wp(20),
alignSelf:'center'
},
input:{
marginTop:wp(5),
alignSelf:'center',
width:wp(50),
borderWidth:wp(0.5)
}
});
export default styles;
*********************************************************************
************************************************************************
Redux
AuthActions actions.js
import {
INCREMENT,DECREMENT, SCHOOL
} from '../types';
export const incrementvalue=(val)=>({
type:INCREMENT,
payload:val
})
export const decrementvalue=()=>({
type:DECREMENT
})
export const sendData=(data)=>({
type:SCHOOL,
payload:data
})
redux
reducers 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 {
count:state.count+action.payload,
};
case DECREMENT:
console.log(' decrement called');
return {
...state,
count:state.count-1,
};
case SCHOOL: // [{asasa},{sasa}]
let DummyArray= [...state.myarray, action.payload]
return{
...state,
myarray: DummyArray
}
default:
return state;
}
}
redux
rootReducer.js
import { combineReducers } from 'redux';
import authReducers from './reducers/authReducers';
const rootReducer = combineReducers({
auth: authReducers,
});
export default rootReducer;
redux
Store.js
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 };
redux
types.js
export const LANGUAGE = 'LANGUAGE'
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
export const SCHOOL = 'SCHOOL'
***************************************************************************
***************************************************************************
pkg.json
"dependencies": {
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-responsive-screen": "^1.4.2",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"redux-thunk": "^2.3.0",
"redux-persist": "^6.0.0",
"@react-native-async-storage/async-storage": "^1.15.9"
Comments
Post a Comment