Мое приложение состоит из множества таблиц с данными. Каждая таблица имеет сортировки и фильтры (везде разные). Обычный запрос к API выглядит примерно так:
axios.get('path/to/api/users', { params: {
sort: {
byField: 'name',
orderBy: 'DESK'
},
filters: {
status: 'active',
country: 'spain'
},
search: 'pablo'
}});
И структура стора выглядит примерно так:
entities: {
users: {
byId: {
0: {},
1: {},
},
allIds: [0, 1]
},
posts: {
byId: {
0: {},
},
allIds: [0]
}
}
И возник вопрос где хранить объект params
. В отдельном редьюсере? В контейнере (this.state
)? Или же вообще в query string
в URl?
Если хранить объект params
в query params
в URl то при переходе между страницами внутри приложения я вынужден запрашивать данные с сервера еще раз.
Можно сделать отдельный редьюсер filters
который будет привязан к ui.
table1: {
idsByFilter: {
filter1: []
filter2: []
}
},
table2: {
...
}
Но проблема остается в том что объект params
нельзя (я так думаю) представить в виде ключа объекта idsByFilter
.
Могу посоветовать использовать redux-fractal или recompose withState. Скажем у вас есть страницы, которая показывает список-таблицу пользователей. В этом случае потребуются следующие составляющие:
1) Тупой компонент UserTable, который получает список пользователей и рендерит в таблицу (никакой логики)
2) Тупой компонент TableFilter - тут пользователь фильтрует результаты по стране, по статусу и тд. Никакой логики
3) контейнер UsersPage - который получается результаты запроса и рендерит UsersTable с этими результатами, а также рендерит TableFilter с текущим состояние фильтра
4) HOC redux-fractal для хранение состояния фильтра и соотв. экшенов
5) HOC withData - для осуществления запроса (это мы пишем сами или ищём в npm)
Теперь примерная схема работы... Использован recompose withState, но в случае большого количества экшнов и если нужен персис - советую редакс-фрактал
// components/UserTable.js
const UserTable = ({ users }) => (
<div>
{users.map(user => user.name)}
</div>
);
// components/TableFilter.js
const TableFilter = ({ active, country }) = (
<div>
Filter 'Active':
<input type="checkbox" checked={isActive} onChange={onActive} />
</div>
);
// components/PageLayout.js
const PageLayout = ({ children }) => (
<div>
{children}
</div>
);
// components/Loader.js
const Loader = () => "Loading...";
// components/Error.js
const Error = () => "Error...";
// containers/PageContainer.jsx
import { compose, withStateHandlers } from 'recompose';
export const UserPage = compose(
withStateHandlers(
props => ({
filterActive: false,
}),
{
setFilterActive: (state, props) => payload => ({
...state,
filterActive: payload
})
}
),
// https://github.com/esphen/fetch-hoc
fetch(props => `http://server/users/?active=${props.filterActive}`)
)
(props => {
const { loading, error, data } = props;
if (loading) {
return <Loader />;
}
if (error) {
return <Error />;
}
return (
<PageLayout>
<TableFilter
active={}
onActive={}
/>
<UserTable
users={data.users}
/>
</PageLayout>
);
};
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть вьюха, в scope элемента находится select, и таблица, select служит фильтром для таблицыПри выборе определенного option select'a, по событию делаю rerender...
Возможно ли в Reactjs сделать роутинг с поддоменами? Например, пользователь заходит на auth
Подскажите пожалуйста, есть ли в d3js возможность построение нескольких шкал по YНужно вывести в графике количество продаж, дату, и среднюю...