Набор инструментов React и redux-first-router

Я копаюсь в React с Redux, чтобы переписать наш продукт. Много тумана вокруг Redux было рассеяно с помощью Redux-Toolkit https://redux-toolkit.js.org/. Затем я обнаружил, что React-Router запутал управление состоянием, и нашел решение в https://github.com/faceyspacey/redux-first-router.

Теперь я хочу объединить эти прекрасные библиотеки. Но мне кажется, что я что-то не так делаю в конфигурации. Вот код. Начиная с примера песочницы в https://codesandbox.io/s/m76zjj924j, я изменил configureStore .js файл (для простоты я пропустил код для пользовательского редуктора)

import { connectRoutes } from 'redux-first-router';
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import { routePaths } from '../routes';

const { reducer: location } = connectRoutes(routePaths);

const {
    middleware: routerMiddleware,
    enhancer: routerEnhancer,
    initialDispatch
  } = connectRoutes(routePaths, { initialDispatch: false });

export default function configureRouteStore() {
  const store = configureStore({
    reducer: {

      location: location
    },
    middleware: [...getDefaultMiddleware(), routerMiddleware],
    enhancers: (defaultEnhancers) => [routerEnhancer, ...defaultEnhancers]
  })
  initialDispatch();
  return store;
}

Но теперь каждый раз, когда изменяется изменение в магазине route = Redux, я получаю исключение в браузере:

index.js:1 A non-serializable value was detected in the state, in the path: `location.routesMap.PROFILE.thunk`. Value: dispatch => {
  dispatch(USER_DATA_LOADED({
    avatar: null
  }));
  const avatar = `https://api.adorable.io/avatars/${Math.random()}`;
  setTimeout(() => {
    // fake async call
    dispatch(USER_… 
Take a look at the reducer(s) handling this action type: HOME.

Я вижу, что это происходит из определений маршрутов, если у маршрута есть свойство thunk, определенное следующим образом: PROFILE: { path: "/profile/:username", thunk: fetchUserData },

Если я изменю свойство thunk на сериализуемое значение (или удалю его), ошибка исчезнет. Каким-то образом теперь преобразователь добавляется в полезную нагрузку действия для обновления путей. Какие...?

Что делать? Хорошо, я могу заставить его работать с традиционной настройкой Redux, но поскольку я большой поклонник набора инструментов redux, мне и, возможно, еще нескольким людям было бы приятно заставить его работать с набором инструментов.


reactjs redux redux-toolkit redux-router
person ztaff    schedule 16.01.2020    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я сопровождаю Redux и создатель Redux Toolkit.

На основе этого сообщения об ошибке и чтения исходного кода Redux-First-Router, похоже, что библиотека действительно пытается сохранить функции преобразования в хранилище Redux. Это проблема, потому что мы специально инструктируем пользователей , чтобы никогда не помещать несериализуемые значения, такие как функции, в состояние или действия.

По умолчанию Redux Toolkit добавляет «промежуточное ПО с неизменяемым сериализуемым состоянием», которое предупреждает вас если в состоянии или действиях обнаруживаются несериализуемые значения, чтобы избежать случайного совершения этой ошибки.

Можно передать некоторые параметры getDefaultMiddleware() для настройки поведения эти промежуточные программы. В настоящее время существует опция ignoredActions, но я не думаю, что у нас есть возможность игнорировать определенные разделы дерева состояний. Включенное redux-immutable-state-invariant промежуточное ПО имеет параметр ignore для частей состояния, поэтому, возможно, мы могли бы добавить этот подход.

Я добавил https://github.com/reduxjs/redux-toolkit/issues/319, чтобы посмотреть, сможем ли мы добавить такую ​​возможность.

А пока вы можете отключить промежуточное ПО, вызвав getDefaultMiddleware({serializableCheck: false}).

обновить

Я только что опубликовал Redux Toolkit v1.2.3, который добавляет параметр ignoredPaths в промежуточное ПО для проверки сериализуемости, позволяющее игнорировать определенные пути к ключам в состоянии.

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

person markerikson    schedule 16.01.2020
comment
Большое спасибо за то, что вы уделили время моей проблеме. И да, вы почти правы. Я немного изучил Redux-First-Router и, насколько я понимаю, структура данных RouteObject никогда не используется в качестве полезной нагрузки для действий. Однако таблица маршрутов, которую я настраиваю как потребитель библиотеки, хранится в Redux. С панками и всем остальным. - person ztaff; 19.01.2020
comment
Я расскажу об этом сопровождающему Redux-First-Router и посмотрю, можно ли без проблем хранить таблицу маршрутов вне Redux. И еще раз спасибо, большое спасибо за всю вашу работу над инструментарием Redux. На мой взгляд, огромное улучшение Redux. - person ztaff; 20.01.2020
comment
На самом деле теперь я вижу, что это проблема в Redux-First-Router и, надеюсь, будет решена в следующей версии. - person ztaff; 20.01.2020
comment
Из любопытства, какая ссылка на проблему, о которой вы говорите? Я не вижу ничего подходящего в списке проблем RFR. - person markerikson; 20.01.2020
comment
Вот. Закрытый вопрос. github.com/faceyspacey/redux-first-router/issues/157 - person ztaff; 22.01.2020