alexmochu

const machineConfig = {
    id: 'signIn',
    context: {
        email: '',
        password: '',
      },
    initial: 'dataEntry',
    states: {
        dataEntry: {
            on: {

alexmochu

For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:

First method (override Material UI classnames):

1 - Add the property classes in the AppBar component:

    <AppBar classes={{root: 'my-root-class'}}

alexmochu

import { applyMiddleware, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { composeWithDevTools } from 'redux-devtools-extension';

import rootReducer from './reducers';
import rootSaga from './sagas';

export default function configureStore(initialState) {
  const sagaMiddleware = createSagaMiddleware();
  const middlewares = [sagaMiddleware];

alexmochu

import { combineReducers } from 'redux';

const initialState = 0;

function count(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1

alexmochu

import { all, call, delay, put, takeEvery } from 'redux-saga/effects'

export function* incrementAsync() {
  yield delay(1000)
  yield put({type: 'INCREMENT'})
}

export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}

alexmochu

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import configureStore from './store'
import App from './App';
import * as serviceWorker from './serviceWorker';

const store = configureStore();

alexmochu

import React from 'react';
import './App.css';

const Counter = ({ value, onIncrement, onDecrement, onIncrementAsync }) =>
<div>
  <button onClick={onIncrementAsync} className="button">
    Increment after 1 second
  </button>
  {' '}
  <button onClick={onIncrement} className="button">

alexmochu

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import logo from './logo.svg';
import increment, { incrementAsync, decrement } from './actions';
import Counter from './Counter';
import './App.css';

function App() {
  const dispatch = useDispatch();
  const counter = useSelector(state => state.count)

alexmochu

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
  color: rgb(112, 76, 182);
}

alexmochu

{
  "package": {
    "dependencies": {
      "react-redux": "^7.2.0",
      "redux": "^4.0.5",
      "redux-devtools-extension": "^2.13.8",
      "redux-saga": "^1.1.3"
    },
    "scripts": {
      "serve": "serve -s build",