Tutorial React JS #7: Memahami dan Mengenal Redux

Brian Harris / / Javascript, React JS
Mengenal Redux pada ReactJS

Pada seri React JS kali ini, kita akan membahas tentang redux, konsep dasar redux, dan bagaimana cara redux bekerja untuk aplikasi website. Mari kita simak dibawah ini apa itu redux.

Apa itu Redux?

Redux merupakan sebuah library JavaScript open-source yang digunakan untuk mengelola state pada aplikasi web. Redux digunakan pada aplikasi web yang kompleks dan membutuhkan pengelolaan state yang konsisten. Redux pertama kali diperkenalkan pada tahun 2015 oleh Dan Abramov dan Andrew Clark.

Mengapa Redux penting untuk diketahui dalam pengembangan aplikasi web?

Redux penting untuk diketahui dalam pengembangan aplikasi web karena dengan Redux, pengelolaan state pada aplikasi web dapat dilakukan secara terpusat dan mudah diatur. Redux juga membantu pengembang dalam melakukan debugging pada aplikasi web. Selain itu, Redux dapat digunakan pada berbagai platform, tidak hanya pada ReactJS.

Cara Redux bekerja pada aplikasi web

Redux bekerja dengan cara membuat sebuah store yang berisi seluruh state pada aplikasi web. Ketika terjadi perubahan pada state, Redux akan membuat sebuah action yang akan diolah oleh reducers sehingga store akan berubah sesuai dengan perubahan state. Dengan begitu, seluruh komponen pada aplikasi web akan menggunakan state yang sama dan dapat dengan mudah diakses.

Konsep dasar Redux

Store

Store pada Redux berisi seluruh state pada aplikasi web. Store pada Redux dapat diakses dan dimodifikasi oleh reducers.

Actions

Actions pada Redux merupakan sebuah objek yang berisi informasi tentang perubahan state pada aplikasi web. Actions dapat dihasilkan oleh action creators dan akan diolah oleh reducers.

Reducers

Reducers pada Redux merupakan sebuah function yang bertanggung jawab untuk mengolah perubahan state pada aplikasi web. Reducers menerima sebuah action dan state, kemudian mengembalikan state yang baru.

Action Creators

Action creators pada Redux merupakan sebuah function yang digunakan untuk membuat actions pada Redux.

Menerapkan Redux pada aplikasi ReactJS

Instalasi Redux pada proyek ReactJS

Untuk menginstal Redux pada proyek ReactJS, dapat dilakukan dengan menggunakan package manager seperti npm atau yarn. Berikut adalah contoh penggunaan npm:

npm install redux react-redux

Membuat Store Redux

Store Redux pada aplikasi ReactJS dapat dibuat dengan menggunakan function createStore pada Redux. Berikut adalah contoh penggunaan createStore:

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

Menentukan Actions dan Action Creators

Actions dan action creators pada aplikasi ReactJS dapat dibuat dengan membuat sebuah file yang berisi function untuk membuat actions dan action creators.

export const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    payload: {
      text
    }
  }
}

Menghubungkan ReactJS dengan Store Redux

Untuk menghubungkan ReactJS dengan Store Redux, dapat dilakukan dengan menggunakan function Provider pada react-redux.

import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Menulis Reducers untuk mengatur state pada aplikasi

Reducers pada aplikasi ReactJS dapat dibuat dengan membuat sebuah file yang berisi function untuk mengolah perubahan state pada aplikasi. Berikut adalah contoh penggunaan reducers pada aplikasi ReactJS:

const initialState = {
  todos: []
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload.text]
      }
    default:
      return state;
  }
};

export default rootReducer;

Contoh penggunaan Redux pada aplikasi ReactJS

Membuat aplikasi sederhana dengan ReactJS dan Redux

Berikut adalah contoh penggunaan Redux pada aplikasi ReactJS untuk menambahkan daftar todo:

import React from 'react';
import { connect } from 'react-redux';
import { addTodo } from './actions';

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
  }

  handleChange = (event) => {
    this.setState({ text: event.target.value });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.addTodo(this.state.text);
    this.setState({ text: '' });
  }

  render() {
    return (
      <div>
        <h1>Todo List</h1>
        <ul>
          {this.props.todos.map((todo, index) => (
            <li key={index}>{todo}</li>
          ))}
        </ul>
        <form onSubmit={this.handleSubmit}>
          <input type="text" value={this.state.text} onChange={this.handleChange} />
          <button type="submit">Add Todo</button>
        </form>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    todos: state.todos
  };
};

export default connect(mapStateToProps, { addTodo })(TodoList);

Menentukan state yang akan diatur menggunakan Redux

State pada aplikasi ReactJS yang akan diatur menggunakan Redux adalah daftar todo.

Membuat Actions dan Action Creators untuk memanipulasi state

Actions dan action creators untuk menambahkan daftar todo pada aplikasi ReactJS dapat dibuat dengan membuat sebuah file yang berisi function untuk membuat actions dan action creators.

export const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    payload: {
      text
    }
  }
}

Menghubungkan komponen ReactJS dengan Store Redux

Komponen ReactJS dapat dihubungkan dengan Store Redux menggunakan function connect pada react-redux.

import { connect } from 'react-redux';
import { addTodo } from './actions';

...

export default connect(mapStateToProps, { addTodo })(TodoList);

Menggunakan Reducers untuk mengubah state pada aplikasi

Reducers pada aplikasi ReactJS digunakan untuk mengubah state pada aplikasi ketika terjadi perubahan. Berikut adalah contoh reducers pada aplikasi ReactJS untuk menambahkan daftar todo:

const initialState = {
  todos: []
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload.text]
      }
    default:
      return state;
  }
};

export default rootReducer;

Tips dan Trik dalam Menggunakan Redux pada Aplikasi ReactJS

Cara mengorganisir file Redux pada project ReactJS

Dalam mengorganisir file Redux pada proyek ReactJS, dapat dilakukan dengan membuat folder khusus untuk file Redux dan memisahkan setiap file Redux berdasarkan fungsinya. Berikut adalah contoh struktur folder file Redux pada project ReactJS:

src/
  actions/
    index.js
  reducers/
    index.js
    todo.js
  store/
    index.js
  components/
    App.js

Menggunakan Redux DevTools untuk debugging aplikasi

Redux DevTools adalah tools yang berguna untuk debugging aplikasi yang menggunakan Redux. Dengan Redux DevTools, kita dapat melihat perubahan state pada aplikasi secara visual dan melakukan time travel debugging. Berikut adalah cara menggunakan Redux DevTools pada aplikasi ReactJS:

    1. Install Redux DevTools Extension pada browser yang digunakan.
    2. Tambahkan code berikut pada file store Redux:
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;
  1. Buka aplikasi pada browser dan buka Redux DevTools.
  2. Sekarang kita dapat melihat perubahan state pada aplikasi dan melakukan time travel debugging.

Menerapkan Redux Middleware untuk mengelola side effect pada aplikasi

Redux Middleware dapat digunakan untuk mengelola side effect pada aplikasi, seperti melakukan HTTP request atau mengirimkan data ke server. Redux Middleware dapat dibuat dengan membuat sebuah function yang menerima parameter store dan next. Berikut adalah contoh Redux Middleware untuk melakukan logging pada aplikasi:

const logger = store => next => action => {
  console.group(action.type)
  console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  console.groupEnd()
  return result
}

const store = createStore(
  rootReducer,
  applyMiddleware(logger)
)

Dalam contoh di atas, Redux Middleware logger menerima parameter store dan next. Function logger akan menjalankan code pada bagian console ketika sebuah action di dispatch. Kemudian, function next akan menjalankan action tersebut dan mengembalikan hasilnya. Setelah itu, function logger akan menampilkan state yang baru pada console.

Dengan menerapkan Redux Middleware pada aplikasi, kita dapat mengelola side effect pada aplikasi secara terpusat dan mempermudah debugging.

Tinggalkan Komentar

Your email address will not be published. Required fields are marked *