我正在开发一个类似于airbnb的应用程序。有两个搜索功能,一个用于搜索公寓,另一个用于搜索汽车租赁。搜索公寓时,结果页面会显示搜索结果以及一些过滤选项,例如从价格范围过滤,并从各种选项(如设施,服务)中过滤。汽车租赁的结果页面与公寓结果页面相同。我的意思是汽车结果显示有关汽车的搜索结果,可以作为租金和过滤类别。
这是我的减速机和此功能的动作。这是一个有效的代码。我试图以最好的方式编码它,尽可能地训练我的编码技巧。我想得到其他专家程序员的帮助,我怎样才能更好地重构这些代码?
actions.js
export function showResultofCar(cityFrom, cityTo, date, paisFrom, paisTo) {
return (dispatch) => {
dispatch({ type: 'CAR_FETCH_START' });
const token = localStorage.getItem('token');
return axios.get(`${API_URL}/car/....`)
.then((response) => {
setTimeout(() => {
dispatch({ type: 'CAR_FETCH_SUCCESS', payload: response.data });
}, 1000);
})
.catch((err) => {
dispatch({ type: 'CAR_FETCH_FAILURE', payload: err });
});
};
}
export function showResultofApartment(people, city, dateFrom, dateTo, pais) {
console.log('people', people, city, dateFrom, dateTo, pais);
return (dispatch) => {
dispatch({ type: 'APARTMENT_FETCH_START' });
const token = localStorage.getItem('token');
return axios.get(`${API_URL}/apartment/...`)
.then((response) => {
console.log('response apart', response.data);
dispatch({ type: 'APARTMENT_FETCH_SUCCESS', payload: response.data });
})
.catch((err) => {
dispatch({ type: 'APARTMENT_FETCH_FAILURE', payload: err });
});
};
}
export function getFilteredResults(price) {
console.log('price', price);
return function (dispatch) {
dispatch({ type: 'CAR_FETCH_WITH_FILTER', payload: price });
};
}
export function getTimeFilteredResults(time) {
console.log('time', time);
return function (dispatch) {
dispatch({ type: 'CAR_FETCH_WITH_TIME_FILTER', payload: time });
};
}
export function sortCarByPrice(price) {
console.log('price is', price);
return function (dispatch) {
dispatch({ type: 'SORT_CAR_BY_PRICE', payload: price });
};
}
export function getApartmentFromPrice(price) {
return function (dispatch) {
dispatch({ type: 'APARTMENT_FILTER_BY_PRICE', payload: price });
};
}
export function getApartmentFromCategories(filter) {
return function (dispatch) {
dispatch({ type: 'APARTMENT_FILTER_BY_CATEGORIES', payload: filter });
};
}
reducers.js
let cars = [];
const initialState = {
fetching: false,
fetched: true,
cars: [],
error: null
};
function carFilterFromPrice(price) {
return cars.filter(car => car.price > price.min && car.price < price.max);
}
function carFilterFromTime(time) {
return cars.filter(function (car) {
const departure = car.departure;
const isValidDate = moment(departure).isValid();
const departureWithDayandTime = isValidDate ?
moment(departure).format('hh.mm') : '';
return departureWithDayandTime > time.min && departureWithDayandTime < time.max;
});
}
function carSortFromPrice(price) {
return cars.sort((a, b) => {
if (price === 'descending') {
return parseFloat(a.price) - parseFloat(b.price);
}
return parseFloat(b.price) - parseFloat(a.price);
});
}
export function getCarResult(state = initialState, action) {
switch (action.type) {
case 'CAR_FETCH_START':
return { ...state, fetching: true };
case 'CAR_FETCH_SUCCESS':
cars = action.payload;
return {
...state,
fetched: true,
fetching: false,
cars: action.payload,
};
case 'CAR_FETCH_WITH_FILTER':
return { ...state, fetched: true, fetching: false, cars: carFilterFromPrice(action.payload) };
case 'CAR_FETCH_WITH_TIME_FILTER':
return { ...state, fetched: true, fetching: false, cars: carFilterFromTime(action.payload) };
case 'SORT_CAR_BY_PRICE':
return { ...state, fetched: true, fetching: false, cars: carSortFromPrice(action.payload) };
case 'CAR_FETCH_FAILURE':
return { ...state, error: action.payload };
default:
return state;
}
}
let apartments = [];
const apartmentInitialState = {
fetching: false,
fetched: true,
apartments: [],
error: null
};
function apartmentFilterFromPrice(price) {
return apartments.filter(apartment =>
apartment.price > price.min && apartment.price < price.max
);
}
function apartmentFilterFromCategory(filter) {
console.log('filter', filter);
}
export function getApartmentResult(state = apartmentInitialState, action) {
switch (action.type) {
case 'APARTMENT_FETCH_START':
console.log('action', action);
return { ...state, fetching: true };
case 'APARTMENT_FETCH_SUCCESS':
apartments = action.payload;
return { ...state, fetched: true, fetching: false, apartments: action.payload };
case 'APARTMENT_FILTER_BY_PRICE':
return { ...state,
fetched: true,
fetching: false,
apartments: apartmentFilterFromPrice(action.payload)
};
case 'APARTMENT_FILTER_BY_CATEGORIES':
return { ...state,
fetched: true,
fetching: false,
apartments: apartmentFilterFromCategory(action.payload)
};
case 'APARTMENT_FETCH_FAILURE':
return { ...state, error: action.payload };
default:
return state;
}
}