What if You Use React and Redux with CDN?

React and Redux Usage

Using React and Redux can sometimes be confusing, especially when it comes to understanding the flow of applications divided into components.

But what if we create examples of React and Redux using plain HTML and JavaScript with a CDN? Would that make the structure easier to understand?

In this post, I’m sharing a single-page example written in plain HTML that might give you a different perspective. However, keep in mind that since there’s no backend integration, the button’s state will not update when clicked. Still, I hope you find it interesting!

React and Redux with CDN

The following code snippet demonstrates how to use React and Redux with CDN. It showcases a simple “light status” management application using Redux Saga to handle asynchronous actions and a Redux Store to manage state.

CDN Links for Required Libraries

<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>

HTML Structure

<div id="root"></div>

Redux: Actions, Reducer, and Saga

Here’s how we define the fundamental Redux components:

// 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
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 and Saga Middleware

const { createStore, applyMiddleware } = Redux;
const ReduxSaga = window.ReduxSaga;
const sagaMiddleware = ReduxSaga.default();

const store = createStore(lightReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

React Application

Here’s the React component implementation:

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'
        )
    );
}

ReactDOM.render(
    React.createElement(Provider, { store: store }, React.createElement(App)),
    document.getElementById('root')
);

Conclusion

This example aims to simplify the fundamental structure of React and Redux and make it easier to understand. If you’d like to explore this concept further, you can expand the example by integrating a backend service for handling the state updates.

Feel free to share your thoughts and suggestions in the comments below!