For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:
1 - Add the property classes in the AppBar component:
<AppBar classes={{root: 'my-root-class'}}
const machineConfig = { | |
id: 'signIn', | |
context: { | |
email: '', | |
password: '', | |
}, | |
initial: 'dataEntry', | |
states: { | |
dataEntry: { | |
on: { |
For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:
1 - Add the property classes in the AppBar component:
<AppBar classes={{root: 'my-root-class'}}
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]; |
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 |
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) | |
} |
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"> |
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(); |
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) |
.App { | |
text-align: center; | |
} | |
.App-logo { | |
height: 40vmin; | |
pointer-events: none; | |
color: rgb(112, 76, 182); | |
} |
{ | |
"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", |