Skip to content

Instantly share code, notes, and snippets.

Josh J Jahans3

Block or report user

Report or block Jahans3

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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.