Scribd
Upload
462 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
462 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
We take content rights seriously. If you suspect this is your content, claim it here.
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