Skip to content

Instantly share code, notes, and snippets.

Avatar

Maxim maximgatilin

View GitHub Profile
@maximgatilin
maximgatilin / middleware.js
Created Jul 4, 2019
react router v4 middleware
View middleware.js
import { push, replace } from 'connected-react-router';
export default store => next => action => {
if (action.pushToUrl) {
const state = store.getState();
const currentQueries = new URLSearchParams(state.router.location.search);
Object.entries(action.pushToUrl).forEach(([key, value]) => {
currentQueries.set(key, value);
});
@maximgatilin
maximgatilin / pomnu.gulp
Created Aug 26, 2018
Я помню первый галп-конфиг...
View pomnu.gulp
Я помню первый галп-конфиг,
То бы не просто инструмент.
Как будто что-то я постиг,
Ворвался во всеобщий тренд.
Прощай консольный компилятор sass,
Прощай рутинный спрайто-генератор,
Прощай дублированный html-каркас,
Ведь есть теперь шаблонизатор.
View reducer.js
import {
CHANGE_USERS_AGE_FILTER,
} from '../actions/actionTypes';
import users from '../../mockData/users';
import {getMaxVal, getMinVal, getValueFromUrl} from '../../utils/functions';
const minAge = getMinVal(users, 'age');
const maxAge = getMaxVal(users, 'age');
const minAgeFilter = getValueFromUrl('users.minAge');
View getURLexample.js
const minAgeFilter = getValueFromUrl('users.minAge');
View function.js
import {browserHistory} from 'react-router';
export function getValueFromUrl(input) {
const [pathname, prop] = input.split('.');
const currentLocation = browserHistory.getCurrentLocation();
if (currentLocation.pathname !== `/${pathname}`) {
return null;
}
View middleware.js
import {replace} from 'react-router-redux';
export default store => next => action => {
if (action.pushToUrl) {
const state = store.getState();
store.dispatch(replace({
pathname: state.routing.locationBeforeTransitions.pathname,
query: {
...state.routing.locationBeforeTransitions.query,
View reducerPart.js
case LOCATION_CHANGE:
if (action.payload.pathname === '/products') {
return {
...state,
productsPage: action.payload.query.page || state.productsPage
}
} else if (action.payload.pathname === '/users') {
return {
...state,
usersPage: action.payload.query.page || state.usersPage
View reducer.js
import {LOCATION_CHANGE} from 'react-router-redux';
const initialState = {
timeFilter: '1M'
};
export const exampleReducer = (state = initialState, action) => {
switch (action.type) {
case LOCATION_CHANGE:
return {
@maximgatilin
maximgatilin / Component.js
Last active Aug 8, 2018
Bad way to sync redux and URL
View Component.js
import React, { Component} from 'react';
import PropTypes from 'prop-types';
class Example extends Component {
static contextTypes = {
router: PropTypes.object.isRequired
};
onChange = () => {
// PUSH TO URL
View package.json
{
"dependencies": {
"react": "16.4.1",
"react-dom": "16.4.1",
"react-redux": "5.0.7",
"react-router": "3.0.5",
"react-router-redux": "4.0.8",
"redux": "^4.0.0"
}
}
You can’t perform that action at this time.