Redux-Uygulaması

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Ogrenciler from './components/Ogrenciler';
import Siniflar from './components/Siniflar';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Ogrenciler />
        <hr />
        <Siniflar />
      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { store } from './redux/store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

Ogrenciler.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Ogrenciler extends Component {
  render() {
    return (
      <div>
        <p>
          <b>Öğrenciler</b>
        </p>
        Ad : <input id="txtOgrenciAd" type="text" onChange={this.props.degistirOgrenciAdi} />
        <br />
        Soyad : <input id="txtOgrenciSoyad" type="text" onChange={this.props.degistirOgrenciSoyadi} />
        <br />
        <button onClick={this.props.ekleOgrenci}>Ekle</button>
        <br />
        <ul>
          {this.props.ogrenciler.map(ogrenci => {
            const key = ogrenci.ogrenciAd + ogrenci.ogrenciSoyad;
            return <ol key={key}>{ogrenci.ogrenciAd} {ogrenci.ogrenciSoyad}</ol>;
          })}
        </ul>
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    ogrenciAd: state.ogrenciReducer.ogrenciAd,
    ogrenciSoyad: state.ogrenciReducer.ogrenciSoyad,
    ogrenciler: state.ogrenciReducer.ogrenciler
  };
};

const mapDispatchToProps = dispatch => {
  return {
    degistirOgrenciAdi: ad => {
      dispatch({ type: 'OGRENCI.DEGISTIR_AD', payload: { ogrenciAd: document.getElementById('txtOgrenciAd').value } });
    },
    degistirOgrenciSoyadi: ad => {
      dispatch({
        type: 'OGRENCI.DEGISTIR_SOYAD',
        payload: { ogrenciSoyad: document.getElementById('txtOgrenciSoyad').value }
      });
    },
    ekleOgrenci: () => {
      dispatch({ type: 'OGRENCI.EKLE' });
    }
  };
};

const OgrencilerConnected = connect(mapStateToProps, mapDispatchToProps)(Ogrenciler);

export default OgrencilerConnected;

ogrenciReducer.js

const initialState = {
  ogrenciAd: '',
  ogrenciSoyad: '',
  ogrenciler: []
};

export const ogrenciReducer = function(state = initialState, action) {
  switch (action.type) {
    case 'OGRENCI.DEGISTIR_AD':
      const ad = Object.assign({}, state, { ogrenciAd: action.payload.ogrenciAd });
      return ad;
    case 'OGRENCI.DEGISTIR_SOYAD':
      const soyad = Object.assign({}, state, { ogrenciSoyad: action.payload.ogrenciSoyad });
      return soyad;
    case 'OGRENCI.EKLE':
      const yeniOgrenci = { ogrenciAd: state.ogrenciAd, ogrenciSoyad: state.ogrenciSoyad};
      const yeniListe = [...state.ogrenciler, yeniOgrenci];
      const liste = Object.assign({}, state, { ogrenciler: yeniListe });
      return liste;

    default:
      return state;
  }
};

React-Nesneleri.png

Reducers.png

redux-uygulamasi.zip

rootReducer.js

import { combineReducers } from 'redux';
import { ogrenciReducer } from './reducers/ogrenciReducer';
import { sinifReducer } from './reducers/sinifReducer';

const allReducers = {
  ogrenciReducer,
  sinifReducer
};

export const rootReducer = combineReducers(allReducers);

Siniflar.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Siniflar extends Component {
  render() {
    return (
      <div>
        <p>
          <b>Sınıf</b>
        </p>
        Ad : <input id="txtSinifAd" type="text" onChange={this.props.degistirSinifAd} />
        <br />
        Ogretmen : <input id="txtOgretmenAd" type="text" onChange={this.props.degistirSinifOgretmen} />
        <br />
        <br />
        Sınıf : {this.props.sinifAd}, Öğretmen: {this.props.sinifOgretmen}
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    sinifAd: state.sinifReducer.sinifAd,
    sinifOgretmen: state.sinifReducer.sinifOgretmen
  };
};

const mapDispatchToProps = dispatch => {
  return {
    degistirSinifAd: () => {
      dispatch({ type: 'SINIF.DEGISTIR_AD', payload: { sinifAd: document.getElementById('txtSinifAd').value } });
    },
    degistirSinifOgretmen: () => {
      dispatch({
        type: 'SINIF.DEGISTIR_OGRETMEN',
        payload: { sinifOgretmen: document.getElementById('txtOgretmenAd').value }
      });
    }
  };
};

const SinifConnected = connect(mapStateToProps, mapDispatchToProps)(Siniflar);

export default SinifConnected;

sinifReducer.js

const initialState = {
  sinifAd: '',
  sinifOgretmen: ''
};

export const sinifReducer = function(state = initialState, action) {
  switch (action.type) {
    case 'SINIF.DEGISTIR_AD':
      const ad = Object.assign({}, state, {sinifAd: action.payload.sinifAd});
      return ad;
      case 'SINIF.DEGISTIR_OGRETMEN':
      const ogretmen = Object.assign({}, state, {sinifOgretmen: action.payload.sinifOgretmen});
      return ogretmen;
    default:
      return state;
  }
};

store.js

import { createStore } from 'redux';
import { rootReducer } from './rootReducer';

export const store = createStore(
  rootReducer
);