Redux with React 2023 5 – react-redux Kurulumu ve Provider Kullanımı

Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.

Merhabalar.

Bir önceki yazımda oluşturduğumuz store’u, Provider component’i ile App.js’de her component’e props geçmeyi göreceğiz.

react-redux Paketi Kurulumu

Oluşturduğumuz bir store’u react uygulamamızda store olarak kullanıp işlem yapabilmemiz için, react-redux paket kurulumunun yapılması gerekir.

Terminalde aşağıdaki komutu çalıştıralım.

npm i react-redux

Provider Kullanımı

import './App.css';
import Counter from './Components/Counter/Counter';
import { Provider } from 'react-redux';
import store from './ReduxStore/CounterStore';

function App() {
  return (

    <Provider store={store}>

      <div className="App">

        <Counter />

      </div>

    </Provider>

  );
}

export default App;

Yapacağımız işlem çok basit aslında.

Oluşturduğum store, bütün uygulama boyunca her component altında erişilebilsin istediğim için, Root component’im olan App.js dosyamın içine gidiyorum.

Provider’ımı react-redux kütüphanesinden import ediyorum.

import { Provider } from 'react-redux';

Sonra oluşturduğum store’u import ediyorum.

import store from './ReduxStore/CounterStore';

Component’lerimi <Provider> ile sarmalıyorum. Bu Provider component’i, store isminde bir props’a sahip, bu store props’una kendi store objemi gönderiyorum. Böylece her component’ten store’a erişim sağlayıp değerini güncelleyip kullanabileceğim.

<Provider store={store}>

      <div className="App">

        <Counter />

      </div>

    </Provider>

Bir sonraki yazımda bu kullanımı görelim.

Görüşmek üzere.