Get started with redux CDN

// Create a Redux store
import { createStore } from 'redux';

// Define the initial state
const initialState = {
  counter: 0,
};

// Define the reducer function
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, counter: state.counter + 1 };
    case 'DECREMENT':
      return { ...state, counter: state.counter - 1 };
    default:
      return state;
  }
}

// Create the Redux store using the reducer and initial state
const store = createStore(counterReducer);

// Define the actions
function increment() {
  return { type: 'INCREMENT' };
}

function decrement() {
  return { type: 'DECREMENT' };
}

// Use the store and actions in your component
function Counter() {
  const [state, dispatch] = React.useReducer(store.getReducer(), initialState);

  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      <span>{state.counter}</span>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

// Render the component and provide the store to the Provider
ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
);