React Native - CRUD Data (Redux Storage) Part 2

Hello sobat, saya akan memberikan artikel mengenai CRUD data pada databases menggunakan library Redux Storage yang sebelumnya sudah kita bahas mengenai menampilkan data pada artikel sebelumnya dan sekarang masuk ke part 2 mengenai CRUD yaitu Tambah, Ubah dan Hapus data, untuk langkah-langkahnya sebagai berikut,

Langkah PART 1 

Folder

Menambahkan beberapa file untuk melakukan fungsi CRUD, struktur folder

• file view_newSiswa.js pada folder components

import React, { Component } from 'react'
import {
  Text,
  View,
  TextInput,
  BackAndroid,
  StatusBar
} from 'react-native'
import { connect } from 'react-redux'

import Toolbar from '../lib/Toolbar'
import TickBtn from '../lib/TickBtn'
import BackBtn from '../lib/BackBtn'
import { styles } from './styles'
import { getColor } from '../lib/helpers'
import { Typo } from '../lib/Typography'
import { addSiswa } from '../actions'

class NewSiswa extends Component {
  constructor(props) {
    super(props);

    this._handleBackButton = this._handleBackButton.bind(this)

    this.state = {
      nis: '',
      nama: ''
    }
  }

  componentDidMount() {
    BackAndroid.addEventListener('backPressed', this._handleBackButton)
  }

  componentWillUnmount() {
    BackAndroid.removeEventListener('backPressed', this._handleBackButton)
  }

  _handleBackButton() {
    if (this.state.nis == '') {
      this.goBack()
    } else {
      this.addSiswa()
    }
    this.goBack()
    return true
  }

  render() {
    return (
      <View style={ styles.addNotesContainer }>
        <StatusBar
          backgroundColor={getColor('paperBlue700')}
          barStyle="light-content"
          animated={true}
        />
        <Toolbar title="Input Siswa" color={getColor('paperBlue')}/>

        <View style={styles.textInputContainer}>
          <TextInput
            style={styles.inputSiswaStyle}
            autoFocus={true}
            placeholder='NIS'
            placeholderTextColor='#aaa'
            returnKeyType='next'
            underlineColorAndroid="transparent"
            selectionColor={getColor('paperTeal')}
            onChangeText={(text) => this.setState({ nis: text })}
            value={this.state.nis}
          />

          <TextInput
            style={styles.inputSiswaStyle}
            multiline={true}
            placeholder='Nama Siswa'
            placeholderTextColor='#aaa'
            returnKeyType='done'
            underlineColorAndroid="transparent"
            selectionColor={getColor('paperTeal')}
            onChangeText={(text) => this.setState({nama: text})}
            value={this.state.nama}
          />
        </View>

        <View style={styles.inputScreenBtnContainer}>
          <TickBtn onBtnPress={this.addSiswa.bind(this)} />
        </View>
      </View>
    )
  }

  goBack(event) {
    this.props.navigator.pop()
  }

  addSiswa() {
    this.props.addSiswa({
      nis: this.state.nis,
      nama: this.state.nama
    })
    this.goBack()
  }
}

export default connect(null, { addSiswa })(NewSiswa)

• file view_singleSiswa.js pada folder components

import React, { Component } from 'react'
import {
  Text,
  View,
  TextInput,
  BackAndroid,
  StatusBar
} from 'react-native'
import { connect } from 'react-redux'

import Toolbar from '../lib/Toolbar'
import TickBtn from '../lib/TickBtn'
import BackBtn from '../lib/BackBtn'
import { styles } from './styles'
import { getColor } from '../lib/helpers'
import { Typo } from '../lib/Typography'
import { updateSiswa } from '../actions'

class SingleSiswa extends Component {
  constructor(props) {
    super(props)

    this._handleBackButton = this._handleBackButton.bind(this)

    this.state = {
      changed: false,
      id: this.props.siswaId,
      nis: this.props.nis,
      nama: this.props.nama
    }
  }

  componentDidMount() {
    BackAndroid.addEventListener('backPressedSingleSiswa', this._handleBackButton)
  }

  componentWillUnmount() {
    BackAndroid.removeEventListener('backPressedSingleSiswa', this._handleBackButton)
  }

  _handleBackButton() {
    if (this.state.changed && this.state.nis != '') {
      this.updateSiswa()
    } else {
      this.goBack()
    }
    return true
  }

  render() {
    return(
      <View style={ styles.addNotesContainer }>
        <StatusBar
          backgroundColor={getColor('paperBlue700')}
          barStyle="light-content"
          animated={true}
        />
        <Toolbar title="Edit Siswa" color={getColor('paperBlue')}/>

        <View style={styles.textInputContainer}>
          <TextInput
            style={styles.inputSiswaStyle}
            placeholder='NIS'
            placeholderTextColor='#aaa'
            returnKeyType='next'
            underlineColorAndroid="transparent"
            selectionColor={getColor('paperTeal')}
            onChangeText={(text) => this.setState({ nis: text, changed: true })}
            value={this.state.nis}
          />

          <TextInput
            style={styles.inputSiswaStyle}
            multiline={true}
            placeholder='Nama Siswa'
            placeholderTextColor='#aaa'
            returnKeyType='done'
            underlineColorAndroid="transparent"
            selectionColor={getColor('paperTeal')}
            onChangeText={(text) => this.setState({nama: text, changed: true})}
            value={this.state.nama}
          />
        </View>

        <View style={styles.inputScreenBtnContainer}>
          <TickBtn onBtnPress={this.updateSiswa.bind(this)} />
        </View>

      </View>
    )
  }

  goBack(event) {
    this.props.navigator.pop()
  }

  updateSiswa() {
    if (this.state.changed) {
      this.props.updateSiswa({
        id: this.state.id,
        nis: this.state.nis,
        nama: this.state.nama
      })
    }

    this.goBack()
  }
}

export default connect(null, { updateSiswa })(SingleSiswa)

Lebih jelasnya lihat vidio

Output Aplikasi

Sekian artikel dari saya semoga bermanfaat, jika ada yang ditanyakan comment saja di bawah.

Sumber github (editing source code)