React Redux: Redux Bootcamp İle React Redux'u Öğrenin

İşte react-redux ve Redux'yi öğrenmeye olanak tanıyan kullanıcı adınız olacak bir React uygulaması için bir başlangıç noktası:

1. Proje Başlatma: Yeni bir React uygulaması oluşturun. Eğer create-react-app kullanıyorsanız, aşağıdaki komutu çalıştırın:

   npx create-react-app react-redux-app
   cd react-redux-app
   

2. Redux ve React-Redux Kurulumu: Uygulamanızda Redux ve React-Redux kütüphanelerini kurun:

   npm install redux react-redux
   

3. Store Tanımlama: Birlikte bir store oluşturun ve rootReducer ve rootSaga (isteğe bağlı eğer Redux Sagas kullanmak istiyorsanız) tanımlayın.

   // store.js
   import { createStore, applyMiddleware } from 'redux';
   import rootReducer from './reducers';
   import thunk from 'redux-thunk';
   import { composeWithDevTools } from 'redux-devtools-extension';
   
   const store = createStore(
     rootReducer,
     composeWithDevTools(applyMiddleware(thunk))
   );
   
   export default store;
   

4. Provider Tanımlama ve Kullanma: Uygulamanızın bana yüzeye (root) component'inde Provider komponentini kullanarak store'a erişim sağlayın:

   // App.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { Provider } from 'react-redux';
   import store from './store';
   import App from './App';
   
   ReactDOM.render(
     <Provider store={store}>
       <App />
     </Provider>,
     document.getElementById('root')
   );
   

5. Actionlar: actions klasörünü oluşturun ve bir action tipini ve içindeki fonksiyonları tanımlayın:

   // actions/counterActions.js
   export const increment = () => ({
     type: 'INCREMENT',
   });
   
   export const decrement = () => ({
     type: 'DECREMENT',
   });
   

6. Reducers: reducers klasörünü oluşturun ve bir reducer fonksiyonunu tanımlayın. Bu fonksiyonda, eğer bir action gördüyse o action'in type'ine göre state'i nasıl değiştirmedini belirtirsiniz:

   // reducers/counterReducer.js
   const initialState = 0;
   
   const counterReducer = (state = initialState, action) => {
     switch (action.type) {
       case 'INCREMENT':
         return state + 1;
       case 'DECREMENT':
         return state - 1;
       default:
         return state;
     }
   };
   
   export default counterReducer;
   

7. Root Reducer ve Saga Tanımlama: rootReducer ve rootSaga fonksiyonlarını tanımlayın:

   // reducers/index.js
   import counterReducer from './counterReducer';
   // Eğer kullanıyorsanız:
   // import rootSaga from './rootSaga';
   
   const rootReducer = (state, action) => {
     // Eğer birden fazla reducer varsa burada bunları birleştirin
     return {
       counter: counterReducer(state.counter, action),
       // Eğer daha fazla reducer varsa:
       // other: otherReducer(state.other, action),
     };
   };
   
   export default rootReducer;
   

   // sagas/index.js (isteğe bağlı)
   import { takeEvery } from 'redux-saga/effects';
   import { increment, decrement } from '../actions/counterActions';
   import counterSaga from './counterSaga';
   
   function* rootSaga() {
     yield takeEvery('INCREMENT', counterSaga);
     yield takeEvery('DECREMENT', counterSaga);
   }
   
   export default rootSaga;
   

8. UI Eylemleri: Komponentlerinizde state'e erişmek ve UI'yi güncellemek için useDispatch ve useSelector hook'larını kullanın:

   // CounterComponent.js
   import React, { useSelector, useDispatch } from 'react';
   import { increment, decrement } from '../../actions/counterActions';
   
   const CounterComponent = () => {
     const count = useSelector((state) => state.counter);
     const dispatch = useDispatch();
   
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => dispatch(increment())}>+</button>
         <button onClick={() => dispatch(decrement())}>-</button>
       </div>
     );
   };
   
   export default CounterComponent;
   

Bu adımlar, React ve Redux'yi kullanarak ilk bir uygulamanızın oluşturmasını sağlayacaktır. Kendi bilgi ve projenizin gereksinimlerine göre bu temel işlevselliği genişletin ve daha karmaşık state yapıları ve uygulama akışları oluşturun. Redux'in ve React-Redux'ün kullanımı hakkında daha fazla bilgi almak için React documentation ve Redux documentation gibi resmi belgelerye başvurabilirsiniz.