Skip to content

Instantly share code, notes, and snippets.

Josh J Jahans3

View GitHub Profile
View map-state.js
return (
<StateConsumer mapState={state => ({ greeting: state.greeting })} mapDispatch={dispatch => dispatch}>
// ...
View final-connect-state.js
class ConnectState extends React.Component {
state = {};
static getDerivedStateFromProps ({ state, mapState = s => s }) {
return mapState(state);
}
shouldComponentUpdate (nextProps, nextState) {
return shallowCompare(this.state, nextState);
}
View shallow-compare.js
function shallowCompare (state, nextState) {
if ((typeof state !== 'object' || state === null || typeof nextState !== 'object' || nextState === null)) return false;
return Object.entries(nextState).reduce((shouldUpdate, [key, value]) => state[key] !== value ? true : shouldUpdate, false);
}
View connect-state.js
class ConnectState extends React.Component {
state = this.props.mapState(this.props.state);
static getDerivedStateFromProps (nextProps, nextState) {}
shouldComponentUpdate (nextProps) {
if (!Object.keys(this.state).length) {
this.setState(this.props.mapDispatch(this.props.state));
return true;
}
@Jahans3
Jahans3 / dispatch-with-thunk.js
Last active Feb 23, 2019
Dispatch with async support
View dispatch-with-thunk.js
export class StateProvider extends React.PureComponent {
static defaultProps = {
state: {},
reducers: [],
middleware: []
};
state = this.props.state;
_dispatch = action => {
View login-async.js
const logIn = (email, password) => async dispatch => {
dispatch({ type: 'LOG_IN_REQUEST' });
try {
const user = api.authenticateUser(email, password);
dispatch({ type: 'LOG_IN_SUCCESS', payload: user });
catch (error) {
dispatch({ type: 'LOG_IN_ERROR', payload: error });
}
};
View final-provider-usehooks.js
export function StateProvider ({ state: initialState, reducers, middleware, children }) {
return (
<StateContext.Provider value={useStateProvider({ initialState, reducers, middleware })}>
{children}
</StateContext.Provider>
);
}
@Jahans3
Jahans3 / use-state-provider.js
Last active Dec 1, 2018
Use state provider
View use-state-provider.js
export function useStateProvider ({ initialState, reducers, middleware = [] }) {
const [state, _dispatch] = useReducer((state, action) => {
return reducers.reduce((state, reducer) => reducer(state, action) || state, state);
}, initialState);
function dispatch (action) {
if (typeof action === 'function') {
return action(dispatch, state);
}
View dispatch-using-hooks.js
export default function SomeCount () {
const [state, dispatch] = useStore();
return (
<>
<p>
Count: {state.count}
</p>
<button onClick={() => dispatch(addOne())}>
+ 1
</button>
View Use-store.js
const StateContent = createContext();
export function useStore () {
const { state, dispatch } = useContext(StateContext);
return [state, dispatch];
}
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.