Skip to content

Instantly share code, notes, and snippets.

Avatar
🤙
Good Vibes Only!

Karanja Mochu alexmochu

🤙
Good Vibes Only!
View GitHub Profile
View machine.js
const machineConfig = {
id: 'signIn',
context: {
email: '',
password: '',
},
initial: 'dataEntry',
states: {
dataEntry: {
on: {
View Overriding Material UI styles with Styled Components.md

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
alexmochu / store.js
Created Jun 30, 2020
Create Redux Store
View store.js
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];
View reducers.js
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
View sagas.js
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
alexmochu / counter.js
Created Jun 30, 2020
Counter Component
View counter.js
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
alexmochu / index.js
Last active Jun 30, 2020
Bind with React Redux
View index.js
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();
View App.js
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)
View App.css
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
color: rgb(112, 76, 182);
}
@alexmochu
alexmochu / template.json
Created Jun 30, 2020
Contents of Template
View template.json
{
"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",