Apa itu State Management (Redux)?

Redux adalah pustaka manajemen state yang digunakan untuk mengelola state aplikasi dalam JavaScript. Redux sering digunakan dengan React, tetapi juga dapat digunakan dengan pustaka atau kerangka kerja JavaScript lainnya. Redux mengikuti prinsip state global yang terpusat dan mengatur state dengan cara yang dapat diprediksi, yang memudahkan pengelolaan state aplikasi yang kompleks.

Langkah-Langkah Menggunakan Redux

1. Install Redux dan React-Redux: Menginstal Redux dan React-Redux (pustaka untuk menghubungkan Redux dengan React).

2. Membuat Store: Menggunakan createStore untuk membuat store yang menyimpan state aplikasi.

3. Membuat Reducers: Reducer adalah fungsi yang mengelola perubahan state berdasarkan tindakan (actions).

4. Membuat Actions: Actions adalah objek yang mendeskripsikan perubahan yang terjadi di aplikasi.

5. Menghubungkan Redux dengan React: Menggunakan Provider untuk menyediakan store ke aplikasi React dan connect untuk menghubungkan komponen dengan state Redux.

Struktur Folder

Berikut adalah struktur folder umum untuk proyek yang menggunakan Redux:

/src
  /components
    - App.js
    - Counter.js
  /actions
    - counterActions.js
  /reducers
    - counterReducer.js
    - index.js
  /store
    - configureStore.js
  - index.js

Contoh Implementasi Redux

1. Install Redux dan React-Redux

Jalankan perintah berikut untuk menginstal Redux dan React-Redux:

npm install redux react-redux

2. Membuat Store

src/store/configureStore.js:

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

const store = createStore(rootReducer);

export default store;

3. Membuat Reducers

src/reducers/counterReducer.js:

const initialState = {
  count: 0
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'RESET':
      return { ...state, count: 0 };
    default:
      return state;
  }
}

export default counterReducer;

src/reducers/index.js:

import { combineReducers } from 'redux';
import counterReducer from './counterReducer';

const rootReducer = combineReducers({
  counter: counterReducer
});

export default rootReducer;

4. Membuat Actions

src/actions/counterActions.js:

export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

export const reset = () => ({
  type: 'RESET'
});

5. Menghubungkan Redux dengan React

src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/App';
import store from './store/configureStore';

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

src/components/App.js:

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>Redux Counter</h1>
      <Counter />
    </div>
  );
}

export default App;

src/components/Counter.js:

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement, reset } from '../actions/counterActions';

function Counter({ count, increment, decrement, reset }) {
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

const mapStateToProps = (state) => ({
  count: state.counter.count
});

const mapDispatchToProps = {
  increment,
  decrement,
  reset
};

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

Penjelasan Kode

1. Store:

   • createStore digunakan untuk membuat store dengan rootReducer.

2. Reducers:

   • counterReducer mengelola perubahan state berdasarkan action type.

   • index.js menggabungkan reducers jika ada lebih dari satu.

3. Actions:

   • Fungsi increment, decrement, dan reset mendefinisikan tipe tindakan yang akan di-dispatch.

4. Menghubungkan Redux dengan React:

   • Provider dari react-redux digunakan untuk menyediakan store kepada aplikasi.

   • connect digunakan untuk menghubungkan komponen dengan state Redux dan dispatch action.

Sumber

• Redux Documentation

• React-Redux Documentation

• MDN Web Docs - Redux

Dengan menggunakan Redux, Anda dapat mengelola state aplikasi yang kompleks secara terpusat dan membuat kode Anda lebih mudah dipelihara dan diperluas. Struktur folder dan contoh kode di atas memberikan dasar yang solid untuk memulai dengan Redux dalam aplikasi React Anda.