What if You Use React and Redux with CDN?

React and Redux Usage

Using React and Redux can sometimes be confusing. Understanding the flow of applications divided into components can also be challenging.

So, how would it look if we created examples of React and Redux using plain HTML and JavaScript with CDN? Would it make it easier to understand the structure?

In this sense, I’m sharing a single-page example written in plain HTML that might offer a different perspective. However, please note that since there is no backend part, when you run the code and click the button, it will not update the button. I hope you find it interesting!

<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: 'The light status could not be updated.' };
        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, `Light Status: ${lightStatus ? 'On' : 'Off'}`),
        React.createElement('button', { onClick: handleToggle, disabled: loading },
            loading ? 'Updating...' : 'Change Status'
        )
    );
}

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