s5.md

STATE MANAGEMENT

## M. HAZAR ARTUNER __*Frontend Developer, VNGRS*__ --- ## KLASİK WEB UYGULAMALARINDA STATE --- ## SINGLE PAGE UYGULAMALARDA STATE --- ## REACT UYGULAMALARINDA STATE --- ## React App

Peki o zaman,

State paylaşımını nasıl yapabiliriz?

---

GLOBAL STATE

Global State Yönetemi İçin Kullanılan

Bazı Api ve Kütüphaneler

• React Context Api
• Mobx
• Redux

---

REDUX

Javascript uygulamaları için, davranışı öngörülebilir, kestirilebilir bir State taşıyıcısıdır.

Redux'ın Üç Prensibi

• Single source of truth (store)
• State doğrudan değiştirilmemeli (actions)
• Değişiklikler Pure fonksiyonlar ile yapılır (reducers)

---

DEMO

Redux with Vanilla JS

https://github.com/hazarartuner/redux-with-vanilla-js

REDUX FLOW

REDUX with REACT

REACT’ın REDUX ile bağlantısını sağlamak için yine REDUX ekibi tarafından geliştirilen “react-redux” kütüphanesini kullanabiliriz.

https://react-redux.js.org/

react-redux

• Provider component
• connect() function

---

PROVIDER

Provider, redux store'unun, altında bulunan component'lara dağıtılmasını sağlar.

https://react-redux.js.org/api/provider

---

Provider Kullanımı Örneği

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";

import { ComponentA } from "./components/ComponentA";
import { ComponentB } from "./components/ComponentB";
import { ComponentC } from "./components/ComponentC";

import reducers from "./redux/reducers";

const store = createStore(reducers);

ReactDOM.render(
  <Provider store={store}>
    <ComponentA>
      <ComponentB>
        <ComponentC/>
      </ComponentB>
    </ComponentA>
  </Provider>,
  document.getElementById("root")
);

---

CONNECT

connect() fonksiyonu, React component'ini Redux store'una bağlar.

https://react-redux.js.org/api/connect

---

Connect

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

---

mapStateToProps?: Function

Aldığı Parametreler

1. state: Object
2. ownProps?: Object

---

mapDispatchToProps?: Function | Object

Aldığı Parametreler

1. dispatch: Function
2. ownProps?: Object

---

DEMO

https://github.com/hazarartuner/redux-with-react/tree/feature/redux

Asynchronous Actions

dispatch it later

---

Async Actions with "redux-thunk"

https://github.com/reduxjs/redux-thunk

DEMO

https://github.com/hazarartuner/redux-with-react/tree/feature/redux-with-async-actions

Teşekkürler :)