React-redux Cheatsheet

Redux merupkana library yang berfungsi sebagai global Provide ke React Project
state management yang memudahkan developer dalam
membuat/mengubah state secara global dan dapat diakses import { Provider } from "react-redux"
dari komponen manapun. import './App.css';
import Home from './components/Home';
Instalasi
import { store } from './store/Store'
# NPM
npm install redux function App() {
npm install react-redux
return (
npm install @reduxjs/toolkit
<div className="App">
<Provider store={store}>
# Yarn
<Home />
yarn add redux
</Provider>
yarn add react-redux
</div>
yarn add @reduxjs/toolkit
);
}
export default App;
Membuat Store
Store adalah bucket untuk menyimpan state global dari suatu aplikasi

import { createStore } from 'redux' Combine Multiple Reducers

// Reducers
import { combineReducers } from "redux";
function counter (state = { value: 0 }, action) {
switch (action.type) {
const reducer = combineReducers({
case 'INCREMENT': counter, user, store
return { value: state.value + 1 } })
case 'DECREMENT':
return { value: state.value - 1 }
default:
useDispatch() Hook (reference to store.dispatch() )
return state
} import React from 'react';
} import { useDispatch } from 'react-redux';

let store = createStore(counter)

const MyComponent = () => {
}
const dispatch = useDispatch();

return (
<button
Menggunakan Store onClick={() => dispatch(
{ type: 'buttonClicked' }
let store = createStore(counter) )} >
Click Me
// memanggil action
</button>
store.dispatch({ type: 'INCREMENT' })
);
store.dispatch({ type: 'DECREMENT' }) };
// Mendapatkan state terbaru
store.getState()
referensi:
// Dipanggil setelah root reducer me-return state
baru https://medium.com/easyread/belajar-redux-dalam-3-menit-
b9afc7bc59f0
store.subscribe(() => { ... })
https://react-redux.js.org/

M. Rahman Wafiq Ghazi