score:-1

Accepted answer
const {override, addDecoratorsLegacy, useBabelRc } = require('customize-cra');
module.exports = override(addDecoratorsLegacy(), useBabelRc());

score:0

import { makeAutoObservable } from "mobx"

class Store {
  // Don't need decorators now
  string = 'Test String';

  setString = (string) => {
    this.string = string;
  };

  constructor() {
    // Just call it here
    makeAutoObservable (this);
  }
}

score:0

import React from "react";
import { observer } from "mobx-react";
import { types } from "mobx-state-tree";

const StoresContext = React.createContext("store");

// custom hook that we can use in function components to get
// the injected store(s)
function useStore() {
  return React.useContext(StoresContext);
}

const StoreModel = types.model({
  things: types.array(types.string)
});
const storeInstance = StoreModel.create({ things: ["foo", "bar"] });

// instead of using the @observer decorator, we can use observer as
// a function and give it a component as argument
const MainComponent = observer(() => {
  const store = useStore();
  return (
    <div>
      {store.things.map((thing) => (
        <div key={thing}>{thing}</div>
      ))}
    </div>
  );
});

export default observer(function App() {
  return (
    <StoresContext.Provider value={storeInstance}>
      <MainComponent />
    </StoresContext.Provider>
  );
});

Related Query

More Query from same tag