🔹 1. Uygulamanın Index’ine Store’u Sarmallama

index.js ya da main.jsx içinde:

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

👉 Provider, store’u tüm component ağacına açar.

🔹 2. Store’daki Verilere Erişme (useSelector)

import { useSelector } from "react-redux";

function Customer() {
  const fullName = useSelector((state) => state.customer.fullName);

  return <p>Merhaba {fullName}</p>;
}

👉 useSelector sayesinde store’daki yalnızca ihtiyacımız olan parçayı seçeriz.

🔹 3. Dispatch ile Reducer Fonksiyonlarını Çağırma

import { useDispatch } from "react-redux";
import { createCustomer } from "./customerSlice";

function CreateCustomerForm() {
  const dispatch = useDispatch();

  function handleSubmit(e) {
    e.preventDefault();
    dispatch(createCustomer("Ali Veli", "12345678901"));
  }

  return <button onClick={handleSubmit}>Kaydet</button>;
}

👉 dispatch, action creator içindeki reducer fonksiyonlarını tetikler.

🔹 4. Eski Yöntem (connect)

Eskiden mapStateToProps ve connect vardı, artık önemli değil ama eski projelerde karşına çıkabilir:

import { connect } from "react-redux";

function Customer({ fullName }) {
  return <p>Merhaba {fullName}</p>;
}

const mapStateToProps = (state) => ({
  fullName: state.customer.fullName,
});

export default connect(mapStateToProps)(Customer);

🔹 5. Form → Önce Local State, Sonra Redux

Form verilerini önce local state’te tutmak mantıklıdır. Redux’a direkt yazma → gereksiz render demektir.

function Form() {
  const [name, setName] = React.useState("");
  const dispatch = useDispatch();

  function handleSubmit(e) {
    e.preventDefault();
    dispatch(createCustomer(name, "12345678901"));
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button>Kaydet</button>
    </form>
  );
}