react-redux basic

App.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import FIcon from 'react-native-vector-icons/FontAwesome';
import homeScreen from './screen/Home';
import settingScreen from './screen/Settings';
import absenScreen from './screen/Absen';
import taskScreen from './screen/Task';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import allReducer from './redux/reducers';

const Tab = createMaterialBottomTabNavigator();
const store = createStore(allReducer);

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Tab.Navigator
          barStyle={{backgroundColor: '#694fad'}}
          shifting={false}
          initialRouteName="Home">
          <Tab.Screen
            name="Home"
            component={homeScreen}
            options={{
              tabBarIcon: () => <FIcon name="home" size={20} color="white" />,
            }}
          />
          <Tab.Screen
            name="Task"
            component={taskScreen}
            options={{
              tabBarIcon: () => <FIcon name="tasks" size={20} color="white" />,
            }}
          />
          <Tab.Screen
            name="Absen"
            component={absenScreen}
            options={{
              tabBarIcon: () => (
                <FIcon name="calendar-check-o" size={20} color="white" />
              ),
            }}
          />
          <Tab.Screen
            name="Settings"
            component={settingScreen}
            options={{
              tabBarIcon: () => <FIcon name="cogs" size={20} color="white" />,
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

HomeContainer.js

/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {View, Text, TouchableOpacity, Button} from 'react-native';
import {Card, CardItem} from 'native-base';

export default class Home extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const screenProps = this.props;
    console.log(screenProps);
    return (
      <View style={{flex: 1, flexDirection: 'column', padding: 15}}>
        <Card style={{flex: 1}}>
          <CardItem header>
            <Text>Selamat Datang</Text>
          </CardItem>
          <CardItem>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua
            </Text>
          </CardItem>
        </Card>
        <View style={{flex: 3}}>
          <Text style={{fontSize: 36}}>Modul</Text>
          <View style={{flex: 1, flexDirection: 'row'}}>
            <TouchableOpacity
              style={{
                width: 250,
                height: 250,
                backgroundColor: '#F7FAFC',
                borderColor: '#CBD5E0',
                borderWidth: 1,
                borderStyle: 'solid',
                padding: 15,
                marginRight: 10,
              }}>
              <Text style={{fontSize: 24}}>Coba</Text>
              <Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={{
                width: 250,
                height: 250,
                backgroundColor: '#F7FAFC',
                borderColor: '#CBD5E0',
                borderWidth: 1,
                borderStyle: 'solid',
                padding: 15,
              }}>
              <Text style={{fontSize: 24}}>Coba</Text>
              <Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View>
          {screenProps.attend == true && <Text>Ya bisa</Text>}

          {screenProps.attend == false && <Text>Aduh Gagal</Text>}

          <Button
            title="Press me"
            onPress={() => {
              screenProps.AttendCheck();
            }}
          />
        </View>
      </View>
    );
  }
}

HomeScreen.js

// Screen File

/* eslint-disable prettier/prettier */
import {connect} from 'react-redux';
import HomeContainer from '../containers/Home';
import {attendCheck} from '../redux/actions';

const mapStateToProps = state => {
  return {
    attend: state.Attendance.status, // Ambil Initial State dari 'reducers/Attendance'
  };
};

const mapDispatchToProps = dispatch => {
  return {
    AttendCheck: () => {
      dispatch(attendCheck());
    },
  };
};

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