ReactJS, bileşen tabanlı bir kütüphanedir ve kullanıcı arayüzlerini kolayca oluşturmayı sağlar. Redux ise, uygulamanın durumunu merkezi bir store'da tutar ve durum değişikliklerini öngörülebilir hale getirir. Bu ikisi, özellikle büyük ve karmaşık uygulamalarda birlikte kullanılır, çünkü React arayüzü yönetirken Redux durumu merkezi bir şekilde kontrol eder.

Kurulum Adımları

1. Proje Oluşturma:

   npx create-react-app my-app

   Bu, varsayılan bir React projesi oluşturur.

2. Dizin Değiştirme:

   cd my-app

3. Paket Yükleme:

   npm install redux @reduxjs/toolkit react-redux

4. Store Kurulumu:
   store.js dosyasında Redux store'u configureStore ile tanımlayın.

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

5. Slice Tanımlama:
   counterSlice.js dosyasında createSlice ile durum ve aksiyonları tanımlayın.

// src/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
    incrementByAmount: (state, action) => { state.value += action.payload; },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

6. Store'u Sağlamak:
   index.js dosyasında store'u sağlayın.

// src/index.js
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>
);

7. Bileşen Bağlantısı:
   useSelector ve useDispatch hook'ları ile React bileşenlerini store'a bağlayın.

// src/App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default App;

Sonuç
Bu adımlarla, ReactJS ve Redux kullanarak basit bir sayaç uygulaması oluşturmuş olduk. React, arayüzü yönetirken Redux, durumu merkezi bir şekilde kontrol etti. Bu kombinasyon, özellikle karmaşık uygulamalarda güçlü ve düzenli bir yapı sağlar.