Где хранить параметры для Ajax запроса

239
19 декабря 2017, 20:19

Мое приложение состоит из множества таблиц с данными. Каждая таблица имеет сортировки и фильтры (везде разные). Обычный запрос к 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.

Answer 1

Могу посоветовать использовать 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>
  );

};
READ ALSO
Как это работает

Как это работает

Кто-нибудь, объясните, пожалуйста, как работает эта библиотека:

233
Backbone rerender bootstrap select

Backbone rerender bootstrap select

Есть вьюха, в scope элемента находится select, и таблица, select служит фильтром для таблицыПри выборе определенного option select'a, по событию делаю rerender...

307
React.js - мультидоменность

React.js - мультидоменность

Возможно ли в Reactjs сделать роутинг с поддоменами? Например, пользователь заходит на auth

268
Построение нескольких осей Y в d3js

Построение нескольких осей Y в d3js

Подскажите пожалуйста, есть ли в d3js возможность построение нескольких шкал по YНужно вывести в графике количество продаж, дату, и среднюю...

224