Create Todo with React Native Redux and Custom Header
July 28, 2020
Create a React Redux App
The recommended way to start new apps with React and Redux is by using the official Redux+JS template for Create React App, which takes advantage of Redux Toolkitand React Redux’s integration with React components.
npx create-react-app my-app --template redux
Redux Core
The Redux core library is available as a package on NPM for use with a module bundler or in a Node application:
# NPM
npm install redux
# Yarn
yarn add redux
It is also available as a precompiled UMD package that defines awindow.Redux
global variable. The UMD package can be used as a<script>
tag directly.
For more details, see the Installation page.
App.js
import React from 'react';
import { View,Text,ScrollView,Alert} from 'react-native';
import { useDispatch,useSelector } from 'react-redux'
import {Colors} from '../Componet/Colors'
import Icon from 'react-native-vector-icons/MaterialIcons';
Icon.loadFont();
const App = () => {
const dispatchRedux = useDispatch();
let Todo = useSelector(state => state.Todo);
const onButtonPress = (UUID) => {
console.info(UUID)
Alert.prompt(
`${UUID?'Edit':'Add'} Todo`,
"Enter your Todo Discription",
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{
text: "OK",
onPress: TextData => {
let MainData={
TextData:TextData,
UUID:UUID?UUID:new Date().getTime()
}
if(UUID){
dispatchRedux({type:"Update",data:MainData})
}else{
dispatchRedux({type:"Create",data:MainData})
}
}
}
]
);
}
return <View style={{backgroundColor:Colors.main}}>
<View style={{backgroundColor:Colors.main}}>
<View style={{
padding:16,
flexDirection:'row',
justifyContent:'space-between'
}}>
<Icon
name="menu"
color={Colors.white}
size={30}
/>
<View style={{flexDirection:'row'}}>
<Icon
style={{marginRight: 5}}
name="notifications-none"
color={Colors.white}
size={30}
/>
<Icon
style={{marginLeft: 5}}
name="account-circle"
color={Colors.white}
size={30}
/>
</View>
</View>
</View>
<View style={{padding:16}}>
<Text style={{color:Colors.white,fontSize:30}}>
{`Hello, \nManoj Bhardwaj`}
</Text>
<View style={{
paddingHorizontal:20,
paddingVertical:6,
marginVertical:20,
borderRadius:20,
flexDirection:'row',
justifyContent:'space-between',
alignItems:'center',
backgroundColor:Colors.tint
}}>
<Icon
style={{margin: 5}}
name="search"
color={Colors.white}
size={30}
/>
<View style={{flexDirection:'row'}}>
<Icon
style={{marginRight: 5}}
name="mic"
color={Colors.white}
size={30}
/>
<Icon
style={{marginLeft: 5}}
name="tune"
color={Colors.white}
size={30}
/>
</View>
</View>
</View>
<View style={{padding:20,flexDirection: 'row',
justifyContent:'flex-end',
backgroundColor:Colors.white}}>
<Text style={{fontSize:25}}>Task</Text>
<Icon
onPress={()=>onButtonPress()}
style={{marginLeft: 5,marginHorizontal:10}}
name="add"
color={Colors.black}
size={30}
/>
</View>
<ScrollView>
{Todo.map(({TextData,UUID})=>{
return <View key={UUID} style={{justifyContent:'space-between',
padding:20,
backgroundColor:Colors.white,
flexDirection:'row'}}>
<Text>{TextData}</Text>
<View style={{flexDirection:'row',justifyContent:'space-between'}}>
<Icon
onPress={()=>
dispatchRedux({type:"Delete",UUID:UUID})
}
style={{marginLeft: 5,marginHorizontal:10}}
name="remove"
color={Colors.black}
size={20}
/>
<Icon
onPress={()=>onButtonPress(UUID)}
style={{marginLeft: 5,marginHorizontal:10}}
name="edit"
color={Colors.black}
size={20}
/>
</View>
</View>
})
}
</ScrollView>
</View>
}
export default App;
Reducer
import { combineReducers} from 'redux';
const Todo=(State=[],action)=>{
switch (action.type) {
case "Create":
return State.concat([action.data]);
case "Update":
let {UUID,TextData}=action.data;
let newData = State.map(el => {
if(el.UUID ===UUID)
return Object.assign({}, el, {TextData:TextData})
return el
});
return newData
case "Delete":
return State.filter((post)=>post.UUID !== action.UUID);
default:
return State;
}
}
export default combineReducers({
Todo
})