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.Reduxglobal 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
                })