Реактивный инструментарий и redux-first-router - PullRequest
Новая
       9

Реактивный инструментарий и redux-first-router

0 голосов
/ 16 января 2020

Я копаюсь в React с Redux для переписывания нашего продукта. Много тумана вокруг Redux было устранено с помощью Redux-Toolkit https://redux-toolkit.js.org/. Затем я обнаружил, что React-Router запутал управление состоянием и нашел решение в redux-first-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;
}

Но теперь каждый раз, когда меняется изменение маршрута = хранилище 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 на сериализуемое значение (или уберу его), ошибка исчезнет. Каким-то образом теперь thunk добавляется в полезную нагрузку действия по обновлению путей. Что ...?

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

1 Ответ

1 голос
/ 16 января 2020

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

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

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

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

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

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

update

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

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

...