Skip to content

Instantly share code, notes, and snippets.

Avatar

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.