useReducer Hook + Context API for Towneley project

To ger rid of Redux!!

A simpler, more straightforward way to handle global state management

library we are using for this project are:
1. Formik
2. Material Design
3. Redux

1. Index.js

	import { StateProvider } from './store.js'
	const hist = createBrowserHistory()
	const app = (
	<StateProvider>
	<Router history={hist}>
	<Switch>
	<Route path='/landing-page' component={LandingPage} />
	<Route path='/profile-form' component={ProfileForm} />
	<Route path='/privacy-notice' component={PrivacyNotice} />
	<Route path='/login-page' component={LoginPage} />
	<Route path='/' component={LandingPage} />
	</Switch>
	</Router>
	</StateProvider>
	)
	ReactDOM.render(app, document.getElementById('root'))

view raw index.js hosted with ❤ by GitHub

2. store.js

	import React, { createContext, useReducer } from 'react'
	import types from './store/typesOfAction'
	import { useActions } from './store/actions'
	import { reducer } from './store/reducers'
	import applyMiddleware from './store/middleware'
	import axios from 'axios'
	const initialState = {
	profileData: {},
	loading: false,
	message: ''
	}
	const store = createContext(initialState)
	const { Provider } = store
	const StateProvider = ({ children }) => {
	const [state, dispatch] = useReducer(reducer, initialState)
	const actions = useActions(state, applyMiddleware(dispatch))
	return <Provider value={{ state, actions }}>{children}</Provider>
	}
	export { store, StateProvider }

view raw store.js hosted with ❤ by GitHub

3. reducer.js

	import types from './typesOfAction'
	const reducer = (state, action) => {
	switch (action.type) {
	case types.SET_LOADING_INDICATOR:
	return { ...state, loading: true }
	case types.SAVE_PROFILE_DATA:
	return { ...state, profileData: action.profileData }
	case types.INCREMENT:
	return { ...state, count: state.count + 1 }
	case types.DECREMENT:
	return { ...state, count: state.count - 1 }
	case types.LOAD_PROFILE_DATA_SUCCESS:
	return { ...state, projectsOfSat: action.payload, loading: false }
	case types.LOAD_PROFILE_DATA_FAIL:
	return {
	...state,
	projectsOfSat: undefined,
	loading: false,
	message: action.payload
	}
	default:
	throw new Error()
	}
	}
	export { reducer }

view raw reducers.js hosted with ❤ by GitHub

4. actions.js

	import types from './typesOfAction'
	export const useActions = (state, dispatch) => ({
	increment: () => {
	dispatch({ type: types.INCREMENT })
	},
	decrement: () => {
	dispatch({ type: types.DECREMENT })
	},
	saveProfile: values => {
	dispatch({
	type: types.SET_LOADING_INDICATOR
	})
	dispatch({
	type: types.SAVE_PROFILE_DATA,
	profileData: values
	})
	},
	loadProfile: values => {
	dispatch({
	type: types.SET_LOADING_INDICATOR
	})
	dispatch({
	type: types.LOAD_PROFILE_DATA
	})
	}
	})

view raw actions.js hosted with ❤ by GitHub

5. middleware.js

	import types from './typesOfAction'
	import axios from 'axios'
	const applyMiddleware = dispatch => action => {
	switch (action.type) {
	case types.LOAD_PROFILE_DATA:
	return axios({
	url: 'your url...',
	method: 'post',
	data: {
	query: `
	query {
	projectsOfSat{
	projectName
	}
	}
	`
	}
	})
	.then(res => {
	console.log(res.data)
	dispatch({
	type: types.LOAD_PROFILE_DATA_SUCCESS,
	payload: res.data.data.projectsOfSat
	})
	})
	.catch(err =>
	dispatch({
	type: types.LOAD_PROFILE_DATA_FAIL,
	payload: err.response
	})
	)
	default:
	dispatch(action)
	}
	}
	export default applyMiddleware

view raw middleware.js hosted with ❤ by GitHub

6. typeOfActions.js

	export default {
	SET_LOADING_INDICATOR: 'SET_LOADING_INDICATOR',
	LOAD_PROFILE_DATA: 'LOAD_PROFILE_INFO',
	LOAD_PROFILE_DATA_SUCCESS: 'LOAD_PROFILE_DATA_SUCCESS',
	LOAD_PROFILE_DATA_FAIL: 'LOAD_PROFILE_DATA_FAIL',
	SAVE_PROFILE_DATA: 'save',
	}

view raw typeOfActions.js hosted with ❤ by GitHub

7. profileForm.js

	const { state, actions } = useContext(store)
	useEffect(() => {
	actions.loadProfile()
	}, [])
	return (
	...
	<Formik
	initialValues={profileData}
	onSubmit={(values, { setSubmitting }) => {
	setTimeout(() => {
	actions.saveProfile(values)
	}, 400)
	}}
	>
	<Form>...</Form>
	</Formik>
	...
	)

view raw profileForm.js hosted with ❤ by GitHub

=======
Same idea - use hook for Material Design

	import React from 'react';
	import ReactDOM from 'react-dom';
	import { ThemeProvider } from '@material-ui/core/styles';
	const theme = {};
	function App() {
	return (
	<ThemeProvider theme={theme}>...</ThemeProvider>
	);
	}
	ReactDOM.render(<App />, document.querySelector('#app'));
	/*
	This hook returns the theme object so it can be used inside a function component.
	*/
	import React from 'react';
	import { useTheme } from '@material-ui/core/styles';
	export default function MyComponent() {
	const theme = useTheme();
	return <div>{`spacing ${theme.spacing}`}</div>;
	}

view raw material hosted with ❤ by GitHub