React Native — Redux (file structure type 2)

Pada pembahasan ini kita akan mencoba membuat organization folder pada react native dengan disertai penggunaan Redux sebagai state managementnya. Untuk pembuatan organization folder ini digunakan agar project kita menjadi rapih dan tertata, hal ini juga digunakan untuk standardisasi file sehingga dapat dibaca secara uneversal.

Baca Juga: React Native — Redux

Create basic project react native

react-native init nameProject

Running App on your devices

react-native init nameProject

Create folder src

Buat file baru di bawah root project, untuk folder ini akan diisi dengan berbagai file kodingan yang akan kita buat. Termasuk pada App.js akan kita pindahkan kesini sehingga di folder ini khusus untuk semua komponen utama yang berhubungan dengan kodingan app kita.

Edit index.js

Didalam index.js kita harus pindahkan route pada App.js karena telah dipindahkan ke folder src. File index.js akan menjadi seperti berikut.

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

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

Create all File inside folder src

Kita aka membuat semua file didalam filder src kita

Gambar 1. src structure

Kemudian isi semua filenya sebagai berikut

App.js

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

Assets Folder Structure

Gambar 2. Assets folder structure

1. Icon folder, berisi seluruh icon yang akan digunakan pada app kita, icon ini dapat berupa gambar dengan extension png, jpg, svg dan sejenisnya
2. Ilustrasion folder, sama seperti folder icon, folder ini juga digunakan untuk menyimpan gambar yang akan ada pada app kita, namun untuk ilustration digunakan untuk menampung gambar yang bersifat content seperti banner, atau sejeninsnya bukan seperti icon yang biasanya digunakan untuk tombol dans sejenisnya
3. index.js, file ini berfungsi untuk pemanggilan yang lebih mudah dilakukan, isinya seperti berikut

// 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}

Components Folder Structure

Gambar 3. Components folder structure

1. Folder atoms, berisi semua file yang sifatnya bersifat per component, seperti custom pada button, text dan sejenisnya.
2. Folder Button, terdapat file bernama index.js ini merupakan component Button yang nantinya dapat kita panggil pada kodingan kita. Isi dari index.js didalam folder Button adalah berikut

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;

3. Didalam atoms akan terdapat file index juga, file index di dalam atoms ini berfungsi untuk memanggil semua data component sepeti pada Button, kemudian pemanggilan component ini akan lebih mudah nantinya. Isi kodingan index.js pada folder atoms adalah berikut

import Button from ‘./Button’

export {Button};

4. Index.js pada dibawah folder Compoenent, ini digunakan untuk juga memudahkan pemanggilan component didalam folder ini. Isi kodingannya adalah berikut

export * from ‘./atoms’;

Pages Folder Structure

Gambar 4. Pages Folder Structure

Pada folder ini menampung semua file yang berhubungan langsung pada app, karena folder ini merupakan perwujudan dari kodingan per page pada app. Bisa dibilang ini juga merupakan file utama kodingan yang membentuk app kita. Disini kita hanya akan mengambil contoh salah satu saja

1. Folder Login, pada folder ini akan berisi file index.js sebagai file utama login, kemudian selain file ini kita juga dapat membuat file lain yang akan menjadi component File login.
2. index.js di dalam folder login, file ini berisi kodingan utama login. Berikut merupakan kodingan index.js pada folder login

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

3. ActionButton.js , ini merupakan file berupa component button untuk nantinya digunakan pada file index, file ini sendiri berguna untuk melakukan suatu action tertentu.

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;

redux Folder Structure

Gambar 5. ActionButton Folder Structure

Folder Redux ini tentunya memuat managament state kita, didalamnya terdapat beberapa file yang digunakan.

1. action.js

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

2. index.js

import store from ‘./store’

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

3. reducer.js

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;

4. store.js

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

const store =createStore(reducer);

export default store;

Untuk folder redux ini sebenarnya dapat kita buat satu lagi folder ‘constants’ yang berisi nama file action method yang akan digunakan pada tiap action di redux, namun disini akan kita hapus dikarenakan hal ini bersifat opsional dan tentunya kita dapat menambahkannya jika dirasa perlu.

router Folder Structure

Gambar 6. router folder structure

index.js

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;

utils Folder Structure

Gambar 7. utils folder structure

1. colors Folder, pada folder ini akan digunakan untuk menampung warna yang akan kita jadikan sebagai patokan warna component app kita, hal ini digunakan untuk memudahkan juga pada saat mendeklarasikan warna. Isi dari index.js didalam folder colors ini adalah.

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

2. index.js pada utils, file ini digunakan untuk nantinya dapat memudahkan kita dalam pemanggilan kita di component lainnya.

export * from ‘./colors’;

Dan itu merupakan keseluruhan isi dari app yang akan kita deklaraskan, sebenarnya kita juga dapat memetakan folder kita sesuai yang kita inginkan dan senyaman kita dalam penyusunan foldernya. Namun apabila yang masih belajar, structur folder diatas juga dapat dijadikan landasan, namun tentunya dapat berubah sesuai dengan kebutuhan saat dalam proses membuild app kita. Sekian dan terimakasih