Scribd
Upload
434 views

React-Redux Cheatsheet: Provide Ke React Project

This document provides an overview of React-Redux including installation, creating a store, combining reducers, using the useDispatch hook, and references. It explains that Redux is a library for global state management in React projects. It can manage state globally and share it across components. The steps shown include installing Redux and related packages, creating a store with a reducer, combining multiple reducers, and using the useDispatch hook to reference the store's dispatch method. References for further reading on Redux are also provided.

Uploaded by

bip bop
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
434 views

React-Redux Cheatsheet: Provide Ke React Project

This document provides an overview of React-Redux including installation, creating a store, combining reducers, using the useDispatch hook, and references. It explains that Redux is a library for global state management in React projects. It can manage state globally and share it across components. The steps shown include installing Redux and related packages, creating a store with a reducer, combining multiple reducers, and using the useDispatch hook to reference the store's dispatch method. References for further reading on Redux are also provided.

Uploaded by

bip bop
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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

You might also like