Can you guys add a license to this granting free use? That will encourage others to build with this :)

We have a dependency on the custom-react-scripts package which requires the user to have a .env file present at the root of their project directory. If the .env file is not present, then subsequent npm run start or npm run build commands will fail. Right now, the only customization we require is to enable support for decorators in the .env file i.e. REACT_APP_DECORATORS=true. A couple potential solutions:

1. Remove .env from .gitignore so it 'just works'
2. Add documentation to README explaining the dependency
3. Add preinstall script to generate the file the first time the user runs an npm install
4. Update to latest version of create-react-app, eject, and make decorator support the default

@andykog Thoughts?

Approaches 1-3 feel like band-aids. Approach 4 initially struck me as overkill but might have some merit. The reason: I leveraged custom-react-scripts to get up and running quickly but the project has not been updated in some time. This may present an opportunity to remove an unnecessary dependency on a package that may no longer actively be maintained.

Thanks for having this repo as a nice example of MobX + React. I was just browsing through the code and noticed that this method should probably be an action unless I'm missing something? Of course, it probably will work just fine unless you have it set to strict mode, but I figured I'd point it out since pretty much all your other methods across the stores are correctly decorated as actions when they mutate state.

Cheers!

Feel free to heck it out here https://github.com/QingpingMeng/medium-clone-client/blob/master/README.md

Is there any reason API calls are made in WillMount as opposed to DidMount

If I'm reading this correctly the React docs say use DidMount:

"componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering."
https://facebook.github.io/react/docs/react-component.html

https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

https://react-mobx.realworld.io/#/

Why isn't it just https://react-mobx.realworld.io/ ? It seems like a more elegant solution instead of having an unnecessary "#"? Just curious as to the reasoning.

Demo can't access.

Thanks for the repo.

I am confused on how to pass the props typed ( React.Component <Props, State> ) for each components. Since I have defined the props of App, I get issue on index.tsx,

Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<App> & Readonly<{ children?: ReactNode; }> & Reado...'.
  Type '{}' is not assignable to type 'Readonly<Props>'.
    Property 'commonStore' is missing in type '{}'.

Please help on this.

Index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import { Provider } from 'mobx-react';
import { useStrict } from 'mobx';
import { HashRouter } from 'react-router-dom';
import commonStore from './Stores/CommonStore';

// import ReconnectingWebsocket from 'reconnecting-websocket';

const stores = {
  commonStore
};

useStrict(true);

const root = (
  <Provider {...stores}>
    <HashRouter>
      <App />
    </HashRouter>
  </Provider>
);

ReactDOM.render(
  root,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

App.tsx

import './App.css';
import * as React from 'react';
import Header from './Layouts/Utils/Header/Header';
import { observer, inject } from 'mobx-react';
import SingleDashboard from './Layouts/Pages/Dashboard/SingleDashboard/SingleDashboard';
import { withRouter } from 'react-router-dom';
import { commonStoreType } from './Stores/CommonStore';

interface Props {
  commonStore: commonStoreType;
}

interface State {

}

@inject('commonStore')
@withRouter
@observer
export default class App extends React.Component <Props, State> {
  constructor(props: Props) {
    super(props);
    // tslint:disable-next-line:no-console
    console.log(props);
  }

  componentWillMount() {
    if (!this.props.commonStore.token) {
      this.props.commonStore.setAppLoaded();
    }
  }

  render () {
    if (this.props.commonStore.appLoaded) {
      return (
        <div>
          <Header />
          <SingleDashboard />
        </div>
      );
    }
    return(
      <h1> Login </h1>
    );
    
  }
}

CommonStore

import { observable, action, reaction } from 'mobx';

class CommonStore  {

  @observable appName = 'Conduit';
  @observable token: string | null |undefined = window.localStorage.getItem('jwt');
  @observable appLoaded = false;

  constructor() {
    
  }

 
}

const commonStore = new CommonStore();
export type commonStoreType = typeof commonStore;
export default commonStore;

It seems like there's a bug where the Editor view doesn't properly clear it's state. If you begin editing an article, leave the page, and then try to create a new post any time after it won't reset the editor store.

I'd be happy to look into this and submit a PR if this is something that needs addressing.

@hodorswit just FYI, I set up the domain https://react-mobx.realworld.io to point at the GH page for this repo! Looks like you currently have links/assets pointing to the absolute URL on GH pages itself though, so the app is currently breaking under the new URL.

This makes things more aesthetically pleasant IMO. Stack Overflow also follows this approach.

Is the example app running the latest version of the code? When running the app locally the /editor/:slug view doesn't seem to reload the article's content for me when run locally.

I did some investigating and I think this might due to the ordering of the Editor paths. I've created a PR that should resolve this, although I think further improvements could be made to the Editor view.

Is it safe to put the password in the observable in the AuthStore? Is it a good practice? If not, what should we do?

Hi, there are quite few places there PureComponent or React.memo could be used to reduce rerender.

For example https://github.com/gothinkster/react-mobx-realworld-example-app/blob/master/src/components/ListPagination.js#L3 . ListPagination is rendered 3 times on each page change, if I wrap it in React.memo it is rendered only one time as it should be.

Other components which cause unneeded rerender EditProfileSettings, FollowUserButton, Banner, YourFeedTab, GlobalFeedTab, TagFilterTab.

This is a much needed resource. Really excellent, thanks!

Hello author,

Could you pls tell me how to use sass with this starter kit?
I saw your main.css from the CDN but idk how to setup sass/images folder for my proj 💃
thanks in advance ;)

Hi,

Thanks for you work. I looked at the code and noticed that there is no proper error handling. Store methods are re-throwing in case of an error and nobody is handling that.

Example https://github.com/gothinkster/react-mobx-realworld-example-app/blob/master/src/stores/authStore.js#L42
In this case any Unsuccessful HTTP will cause Uncaught promise error.

1. secured routes are still accessible eg: https://react-mobx.realworld.io/#/settings
2. when I refresh page... it shown me navigation as of before login for some time and then shows actual navigation, it this avoidable..?

• React hooks
• Provider now obsolete (mobx-react)
• Use fetch instead of superagent

Can we use
Promise.resolve()

from
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve

instead of
new Promise(res => res())

from here

I have a noob question to ask about passing data between stores, which I didn't understand how it works.

authStore accesses data from userStore and commonStore and it just basically imports them from their singleton export. however all these stores are also imported to index.js and passed to provider of mobx in order to inject and use them in react components. What I don't get here is that these should be different instances of userStore and commonStore, shouldn't they? Because they are imported twice to different js files.

I'm trying to do the same pattern in my very basic app where I need to pass data between stores, but it just doesn't work out. when I change a data in a store which I access from within a React component, it doesn't affect the same store which is imported to another store to pass its data, because they are different instances of the store classes.

I hope I made my confusion clear here, and I really would appreciate some help to understand some fundamentals here, and the point I'm missing.

Thanks a lot!

After cloning the project,I try to understand the logic and the code.But I wonder where are the CSS files and how do you set the style？Could you pleae tell me?By the way,thanks a lot for your contribution and share.

byAuthor: (author, page, query) => requests.get(/articles?author=${encode(author)}&${limit(5, page)}),

query is declared by not used.

articlesStore.js calls byAuthor with author, page, LIMIT, where LIMIT is not used at all.

The demo you have running works perfectly. However, when I run this locally, everything work fine, except that swapping to a new tag does not work. The initial click of a tag will display. But then trying to swap to a new tag will not load the new tag contents.

Are there any plans to upgrade this to react-router 4? It's markedly different, and seems like it would be a good evolution for this project.

it would be nice to include a few samples for testing with jest. like tests for api requests and constructing snapshot tests (handling the mobx store). thanks. this is a great resource.

(edit) I did find some additional egghead.io videos which appear to include testing material and will look at those in the meantime. https://egghead.io/browse/libraries/mobx

It would be neat to have your avatar show up on the profile page.

Please add PrivateRoute example.

Hey Andy this repo is excelente, thank you!