React Native — Redux (file structure type 2)

react-native init nameProject

react-native init nameProject

import {AppRegistry} from ‘react-native’;
import App from ‘./src/App’;
import {name as appName} from ‘./app.json’;

AppRegistry.registerComponent(appName, () => App);

Gambar 1. src structure

import React, { Component } from ‘react’;
import {
StyleSheet,
View,
Button,
Text
} from ‘react-native’;
import { connect, Provider } from ‘react-redux’;

import {store} from ‘./redux’
import Login from ‘./pages/Login’
import Register from ‘./pages/Register’
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
import Router from ‘./router’

const Stack = createStackNavigator();

class App extends Component {

render() {
return (
<Provider store = { store }>
<NavigationContainer>
<Router />
</NavigationContainer>
</Provider>
);
}
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
textCenter:{
textAlign :’center’
}
});

export default App

Gambar 2. Assets folder structure

// ilustration
import image from ‘./illustrations/image.img’
import image2 from ‘./illustrations/image.svg’

// icon
import icon from ‘./icon/icon.svg’
import icon2 from ‘./icon/icon.svg’
export {image, image2,icon,icon2}

Gambar 3. Components folder structure

import React from ‘react’
import {Button} from ‘react-native’
import {TouchableOpacity} from ‘react-native-gesture-handler’

const Button = ({title}) => {
return(
<TouchableOpacity
style={{
backgroundColor:’silver’,
borderRadius:25,
paddingVertical:’13'
}}
>
<Text
style={{
fontSize:12,
fontWeight:’bold’,
color:’white’,
textTransform: ‘uppercase’,
textAlign:’center’
}}
>

</Text>
</TouchableOpacity>
)
}

export default Button;

import Button from ‘./Button’

export {Button};

export * from ‘./atoms’;

Gambar 4. Pages Folder Structure

import React from ‘react’;
import {
StyleSheet,
View,
Button,
Text,
TextInput
} from ‘react-native’;
import {useSelector,useDispatch} from ‘react-redux’
import {useEffect} from ‘react’
import {setForm} from ‘../../redux’
import ActionButton from ‘./ActionButton.js’

const Login =({navigation})=>{
const {form} = useSelector(state=>state.LoginReducer)
const dispatch = useDispatch();

const sendData =()=>{
console.log(‘data yang akan dikirim’, form)
}

const onInputChange = (value, inputType)=>{
dispatch(setForm(inputType, value));
}

return (
<View>
<Text>Login form</Text>
<TextInput
placeholder=’masukan angka Login’
value={form.email}
onChangeText={value=>onInputChange(value, ‘email’)}
/>
<Button onPress={sendData} title=’click’ />
<Text>
Email: {form.email}
</Text>

<Button title=’login’ onPress={()=> navigation.navigate(‘Register’)} />
<ActionButton title=’Loginpage’ desc=’Login ke App’ />
</View>
)
}
export default Login

import React from ‘react’
import {View, Text} from ‘react-native’
import {colors} from ‘../../utils’
import {TouchableOpacity} from ‘react-native-gesture-handler’

const ActionButton =({title,desc})=>{
return(
<TouchableOpacity>
<Text style={{color:colors.text.default}}>
Click
</Text>
</TouchableOpacity>
)
}

export default ActionButton;

Gambar 5. ActionButton Folder Structure

export const setForm =(inputType, value)=>{
return {type:’SET_FORM’, inputType:inputType,inputValue:value}
};

import store from ‘./store’

export * from ‘./action’
export {store}

import {combineReducers} from ‘redux’
const initialState = {
name:’ahmad’,
};

const initialStateRegister={
form:{
fullName:’’,
email:’asdsfghjk’,
password:’’
},
title :’page register’,
desc:’ini adalah desc reg’
};

const RegisterReducer = (state = initialStateRegister, action) =>{
if (action.type === ‘SET_TITLE’) {
return{
…state,
title: ‘Register Ganti title’,
};
}
if (action.type === ‘SET_FORM’) {
return{
…state,
form:{
…state.form,
[action.inputType]:action.inputValue
},
}
}
return state;
};

const initialStateLogin = {
info:’this login page’,
form:{
fullName:’’,
email:’asdsfghjk’,
password:’’
},
};

const LoginReducer= (state=initialStateLogin,action)=>{
if (action.type === ‘SET_FORM’) {
return{
…state,
form:{
…state.form,
[action.inputType]:action.inputValue
},
}
}
return state
};

const reducer = combineReducers({
RegisterReducer,
LoginReducer
})

export default reducer;

import {createStore} from ‘redux’
import reducer from ‘./reducer’

const store =createStore(reducer);

export default store;

Gambar 6. router folder structure

import React from ‘react’
import {createStackNavigator} from ‘@react-navigation/stack’
import {Login, Register} from ‘../pages’
const Stack = createStackNavigator();

const Router =()=>{

return(
<Stack.Navigator>
<Stack.Screen
name=”Login”
component={Login}
options={{
headerShown:false
}}
/>
<Stack.Screen
name=”Register”
component={Register}
options={{
headerShown:false
}}
/>
</Stack.Navigator>
)
}

export default Router;

Gambar 7. utils folder structure

export const colors ={
default : ‘red’,
disable : ‘silver’,
dark : ‘black’,
text : {
default :’yellow’
}
};

export * from ‘./colors’;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store