usm icon indicating copy to clipboard operation
usm copied to clipboard

How to use it with redux devtools?

Open xoka4 opened this issue 3 years ago • 2 comments

in this post ( https://unadlib.medium.com/a-concise-design-that-completely-changed-redux-e95d6b76bd8b ) you've commented that it can be used with redux-devtools. But its not showing the states or actions. any solution?

xoka4 avatar Jul 01 '22 19:07 xoka4

You can view the document https://github.com/reduxjs/redux-devtools/tree/main/extension

For example,

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "usm-redux";
import { compose } from "redux";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Counter } from "./counter.service";

const counter = new Counter();

const composeEnhancers =
  // @ts-ignore
  typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? // @ts-ignore
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsDenylist, actionsCreators, serialize...
      })
    : compose;

// const reduxEnhancer = composeEnhancers(
//   applyMiddleware(...middleware)
//   // other store enhancers if any
// );

const store = createStore(
  {
    modules: [counter],
  },
  undefined,
  {
    reduxEnhancer: composeEnhancers(),
  }
);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App counter={counter} />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

unadlib avatar Jul 19 '22 15:07 unadlib

Hello, would you please be kind enough to make a tutorial on how to do that? Thanks a million ( I've tried what you've mentioned in your comment, but it doesn't seem to work. not sure why )

xoka4 avatar Aug 20 '22 15:08 xoka4

@xoka4 , I've updated the example https://github.com/unadlib/usm-redux-demo. Sorry, there was an issue with the example.

Feel free to use it. And by the way, there is a framework based on this implementation reactant.

image

unadlib avatar Aug 21 '22 03:08 unadlib

Thanks a lot. I'll check the repo today.

xoka4 avatar Sep 02 '22 12:09 xoka4