Блог

Главная - Вопросы по программированию - Как обрабатывать действия AG-Grid API внутри функций redux или компонентов?

Как обрабатывать действия AG-Grid API внутри функций redux или компонентов?

#reactjs #redux #ag-grid #ag-grid-react #redux-toolkit

#reactjs #redux #ag-grid #ag-grid-реагировать #redux-toolkit

Вопрос:

Для проекта, над которым я работаю, мы используем AG-Grid с данными, загруженными с сервера.
Пользователи будут иметь возможность загружать файлы, и эти файлы будут отображаться в сетке сразу после начала загрузки (со статусом загрузки).

Цель состоит в том, чтобы обновить сетку после завершения загрузки, поэтому, когда наша функция React Redux asyncThunk завершится успешно. Это потому, что таким образом мы обновляем сетку при изменении статуса загрузки, так что пользователю не нужно обновлять браузер, чтобы увидеть последние обновления его загрузки.

В чем проблема?

В настоящее время мы используем ссылку на AG-Grid api в других наших компонентах для запуска аналогичных действий AG-Grid (таких как перезагрузка).
Но мы не можем передать эту ссылку в наш фрагмент React Redux, поскольку там не может быть несериализуемого значения.

Возможные решения?

Есть ли способ передать ссылку AG-Grid api через срез React Redux для запуска действий в asyncThunk (https://redux-toolkit.js.org/api/createAsyncThunk )?

Есть ли способ использовать эту ссылку в файле, куда мы экспортируем функцию, которая запускает действие этой ссылки AG-Grid api? Так что это может быть вызвано в asyncThunk.

Если есть другой способ, которым это может быть возможно, пожалуйста, дайте мне знать. Спасибо.

Комментарии:

1. Я очень хорошо знаком с redux и redux-toolkit, но я не знаком с AG-Grid. Если бы вы могли опубликовать какой-нибудь пример кода (например, компоненты, которые используют перезагрузку), это было бы полезно. Вы можете использовать createAsyncThunk для создания функции, которая должна вызываться с некоторым компонентом AG-Grid в качестве аргумента. Вы не хотите иметь несериализуемые значения в состоянии или в действиях, которые в конечном итоге отправляются вашим asyncThunk. Но хорошо иметь их в создателе действий , который создается createAsyncThunk .

2.Я только что узнал, что аргументы, которые вы используете при вызове создателя действия asyncThunk, в конечном итоге привязываются к действию как action.meta.arg redux-toolkit.js.org/api /.… Это означает, что то, что я сказал ранее, неверно, потому что аргументы создателя действия должны быть сериализуемыми. Хакерским обходным путем была бы функция с двойной стрелкой, так что фактический создатель действия не вызывается с несериализуемым компонентом, но этот компонент будет находиться в области действия создателя полезной нагрузки из-за внешней функции.

Ответ №1:

Когда загрузка завершена, вы можете отправить действие через thunk, которое добавляет эту информацию в состояние redux (например, в форме state.uploadStatus = 'uploaded' ). Получите доступ к этому uploadStatus в компоненте, в котором у вас есть ссылка на api AG-Grid useSelector . Затем вы можете отслеживать изменения uploadStatus в useEffect перехвате и запускать обновление сетки соответствующим образом.

 const uploadStatus = useSelector(uploadStatusSelector)

useEffect (()=> {
   refreshGrid()
}, [uploadStatus]);

Если вы загружаете несколько файлов и вам нужно обновлять сетку каждый раз, когда загружается какой-либо из этих файлов, установите uploadStatus значение array и вставьте что-то подобное fileId в массив, когда любой из этих файлов будет успешно загружен.