React ve Redux CDN İle Kullanılırsa

React ve Redux kullanımı bazen kafa karıştırıcı olabiliyor. 

Componentlere bölünmüş normal react uygulamlaları üzerinden işleyişi anlamak da zor olabiliyor. 

 Peki, acaba React ve Redux örneklerini normal html ve javascript ile, CDN kullanarak oluştursak nasıl görünür, yapının anlaşılmasını kolaylaştırır mı? 

 Bu anlamda farklı bir akış açısı sunabileceği ümidiyle normal html olarak yazılmış tek sayalık bir örneği sizinle paylaşıyorum. Fakat burada backend kısmı bulunmadığı için kodu çalıştırdığınızda karşınıza çıkan düğmeye bastığınızda düğmenin güncellenmeyeceğini unutmayın. Umarım ilginizi çeker.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.1.1/redux.min.js"></script>
<script src="https://unpkg.com/redux-saga/dist/redux-saga.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.4/react-redux.min.js"></script>        
<div id="root"></div>     
<script>
// Redux Actions
const TOGGLE_LIGHT_REQUEST = 'TOGGLE_LIGHT_REQUEST';
const TOGGLE_LIGHT_SUCCESS = 'TOGGLE_LIGHT_SUCCESS';
const TOGGLE_LIGHT_FAILURE = 'TOGGLE_LIGHT_FAILURE';

const toggleLightRequest = (status) => ({
    type: TOGGLE_LIGHT_REQUEST,
    payload: status,
});

const toggleLightSuccess = (status) => ({
    type: TOGGLE_LIGHT_SUCCESS,
    payload: status,
});

const toggleLightFailure = () => ({
    type: TOGGLE_LIGHT_FAILURE,
});

// Redux Reducer
const initialState = {
    lightStatus: false,
    loading: false,
    error: null,
};

function lightReducer(state = initialState, action) {
    switch (action.type) {
        case TOGGLE_LIGHT_REQUEST:
            return { ...state, loading: true };
        case TOGGLE_LIGHT_SUCCESS:
            return { ...state, lightStatus: action.payload, loading: false };
        case TOGGLE_LIGHT_FAILURE:
            return { ...state, loading: false, error: 'Lamba durumu güncellenemedi.' };
        default:
            return state;
    }
}

// Redux Saga
const { createStore, applyMiddleware } = Redux;
const ReduxSaga = window.ReduxSaga;
const { takeLatest, call, put } = ReduxSaga;

const createSagaMiddleware = ReduxSaga.default;

function* toggleLightSaga(action) {
    try {
        const response = yield call(fetch, '/api/toggle-light', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ status: action.payload }),
        });
        const data = yield response.json();

        if (data.success) {
            yield put(toggleLightSuccess(action.payload));
        } else {
            yield put(toggleLightFailure());
        }
    } catch (error) {
        yield put(toggleLightFailure());
    }
}

function* rootSaga() {
    yield takeLatest(TOGGLE_LIGHT_REQUEST, toggleLightSaga);
}

// Redux Store
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
    lightReducer,
    applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

// React App Component
const { useDispatch, useSelector, Provider } = ReactRedux;

function App() {
    const dispatch = useDispatch();
    const lightStatus = useSelector((state) => state.lightStatus);
    const loading = useSelector((state) => state.loading);

    const handleToggle = () => {
        dispatch(toggleLightRequest(!lightStatus));
    };

    return React.createElement('div', null,
        React.createElement('h1', null, `Lamba Durumu: ${lightStatus ? 'Açık' : 'Kapalı'}`),
        React.createElement('button', { onClick: handleToggle, disabled: loading },
            loading ? 'Güncelleniyor...' : 'Durumu Değiştir'
        )
    );
}

// Render App
ReactDOM.render(
    React.createElement(Provider, { store: store },
        React.createElement(App)
    ),
    document.getElementById('root')
);
</script>