Cannot setup Redux debugging with `remote-redux-devtools`

  Kiến thức lập trình

So I’ve been trying to incorporate remote-redux-devtools in my middleware for debugging of Redux in React Native.
Previously I used Flipper but since it’s being depricated I need to find another solution.

For the life of me I cannot get this to work. What am I doing wrong?

const getStoreConfig = (rpc: Rpc<RpcMethods>) => {
  const middlewareCompose = new Tuple(
    StoreCallMiddleware(),
    RpcCallMiddleware(rpc),
  );

  // if (__DEV__) {
  //   const createDebugger = require('redux-flipper').default;
  //   middlewareCompose.push(createDebugger());
  // }

  if (__DEV__) {
    import('remote-redux-devtools')
      .then(({composeWithDevTools}) => {
        const compose = composeWithDevTools({
          realtime: true,
          name: 'Your Instance Name',
          hostname: '10.19.188.26',
          port: 8000, // the port your remotedev server is running at
        });

        return {
          reducer,
          middleware: compose(middlewareCompose),
          devTools: true,
        };
      })
      .catch(error => {
        console.error('Error loading remote-redux-devtools', error);
      });
  }

  return {
    reducer,
    middleware: () => middlewareCompose,
    devTools: false,
  };
};

const store = (rpc: Rpc<RpcMethods>) => {
  return configureStore(getStoreConfig(rpc));
};

export type RootState = ReturnType<typeof reducer>;

export default store;

Specifically get an error here for middleware: compose(middlewareCompose)

Argument of type 'Tuple<[Middleware<{}, any, Dispatch<UnknownAction>>, Middleware<{}, any, Dispatch<UnknownAction>>]>' is not assignable to parameter of type 'StoreEnhancer'.
  Type 'Tuple<[Middleware<{}, any, Dispatch<UnknownAction>>, Middleware<{}, any, Dispatch<UnknownAction>>]>' provides no match for the signature '(next: StoreEnhancerStoreCreator<{}, {}>): StoreEnhancerStoreCreator<{}, {}>'.ts(2345)

I’ve tried middleware: compose(applyMiddleware(...middlewareCompose))

Argument of type 'StoreEnhancer<{ dispatch: unknown; }, {}>' is not assignable to parameter of type 'StoreEnhancer'.ts(2345)
Argument of type 'StoreEnhancer<{ dispatch: unknown; }, {}>' is not assignable to parameter of type 'StoreEnhancer'.
  Types of parameters 'next' and 'next' are incompatible.
    Types of parameters 'preloadedState' and 'preloadedState' are incompatible.
      Type 'PreloadedState | undefined' is not assignable to type 'PreloadedState<S> | undefined'.
        Type 'PreloadedState' is not assignable to type 'PreloadedState<S> | undefined'.ts(2345)
redux.d.ts(324, 103): This type parameter might need an `extends PreloadedState<S> | undefined` constraint.

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT