Using mobx-state-tree for MVVM pattern

[anishmiviewis]

Hi, I am in process of defining MVVM pattern for my application and what I was thinking was have individual store for each view model. So that is if I have Login view.

const LoginViewModel = types
  .model({
    email: types.string,
    password: types.string,
    appVersion: types.string,
    errorMessage: types.string,
    loading: types.boolean,
  })
  .views((self) => ({
    get isValid() {
      return isValidEmail(self.email) && !isEmpty(self.password);
    },
  }))
  .actions((self) => ({
    login: flow(function* login() {
      try {
        if (!self.isValid) {
          return;
        }
        const response = yield authRepository.login(self.email, self.password);
        console.log(response, "response from login view model");
      } catch (error) {
        console.log(error);
      }
    }),

    setEmail(email) {
      self.email = email;
    },
    setPassword(password) {
      self.password = password;
    },
    setAppVersionText(update, appVersion = "[version]") {
      if (!update?.label) {
        self.appVersion = `v${appVersion}`;
        return;
      }
      self.appVersion = `v${appVersion} rev.${update.label.substring(1)}`;
    },
  }));

let loginViewModel;

export const useLoginViewModel = () => {
  const viewModel = useMemo(() => {
    if (!loginViewModel) {
      loginViewModel = LoginViewModel.create({
        email: "",
        password: "",
        appVersion: "",
        errorMessage: "",
        loading: false,
      });
    }
    return loginViewModel;
  }, []);

  return viewModel;
};

and this useLoginViewModel will be used in View as follows

function LoginScreen() {
  const {
    email,
    password,
    appVersion,
    setEmail,
    setPassword,
    isValid,
    setAppVersionText,
    login,
  } = useLoginViewModel();

  const prepareAppVersionText = async () => {
    const [{ appVersion }, update] = await Promise.all([
      codePush.getConfiguration(),
      codePush.getUpdateMetadata(),
    ]);
    setAppVersionText(update, appVersion);
  };

  useEffect(() => {
    prepareAppVersionText();
  }, []);

  return (
    <KeyboardAvoidingView style={styles.container} behavior="padding">
      <View onPress={Keyboard.dismiss}>
        <View style={styles.loginContainer}>
          <View style={[styles.input]}>
            <Input
              testID="username-input"
              label="Username"
              style={styles.textInput}
              placeholderTextColor="#DDD"
              value={email}
              onChangeText={(val) => setEmail(val)}
              autoCorrect={false}
              valid
              autoCapitalize="none"
              keyboardType="email-address"
            />
          </View>
          <View style={[styles.input]}>
            <Input
              testID="password-input"
              label="Password"
              style={styles.textInput}
              placeholderTextColor="#DDD"
              value={password}
              valid
              onChangeText={(val) => setPassword(val)}
              secureTextEntry
            />
          </View>
          <View style={styles.buttons}>
            <View
              style={{
                marginBottom: 20,
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              {/* {isLoading && (
                <ActivityIndicator testID="loader" color={THEME.BLUE_PRIMARY} />
              )} */}
              {!isValid && (
                <Text style={{ color: "red" }}>
                  Username or password incorrect.
                </Text>
              )}
            </View>
            <MiButton
              testID="signin-button"
              style={styles.buttonPadding}
              color={THEME.BLUE_PRIMARY}
              inverse
              onPress={login}
              title="Sign In"
            />
          </View>
        </View>
      </View>
        <Text style={{ marginTop: 20, textAlign: "center", color: "#CCC" }}>
          {appVersion}
        </Text>
      </View>
    </KeyboardAvoidingView>
  );
}

export const Login = observer(LoginScreen);

along with this I am planning to have a rootStore which will contain global stores which will not include view models , as view models are its individual stores

I am not sure if this is the correct way of designing the store and wanted some suggestion here. Will this be any problem in future ?

[anishmiviewis]

@coolsoftwaretyler Please accept my apologies for mentioning you here but I really need your suggestion on this to move forward. Can you please help me on this

[coolsoftwaretyler]

Hey @anishmiviewis - no apologies necessary. I'm happy to help.

I really like this approach. I did something similar in my app the other day and I had a really good experience with it. It's nice because you can test your MST store independently, and you can do pretty easy dependency injection for testing your React components as well. MobX-State-Tree also provides a nicer way to accomplish things that people often do by chaining useEffect and useState.

Here are a couple of things I'd be wary of, but your example doesn't seem to have these issues as written:

1. MST doesn't like interacting between sibling stores. You can do it, but you have to use unprotect, which is a yellow flag. So if you think your view-model stores will need to ever interact with the rest of your global state, consider making them a part of the global state.
2. As with anything application of MVVM, make sure you prevent the ViewModel from knowing anything about the UI. I think you're good here, but as your app grows, it's sometimes tempting to let the view model know a little too much about React.

All that to say, I love this approach. I think you should embrace it and write about your experiences. Let us know any good or bad experiences with this approach. If you publish something, I'll tweet it out from the MST twitter account.

Good luck! If this answers your question, will you please mark it as such? Happy to answer any follow ups.

[anishmiviewis]

Thank you very much. For sure will share my experience with the approach

[anishmiviewis]

Hi @coolsoftwaretyler Sorry to bother you again. But I have one tiny follow up on your point no 1 above

"MST doesn't like interacting between sibling stores. You can do it, but you have to use unprotect, which is a yellow flag. So if you think your view-model stores will need to ever interact with the rest of your global state, consider making them a part of the global state."

I am little confused regarding the siblings stores that you mentioned. Can you please help me with example. I really want to know before I dive into further regarding consequences

Also if any one of View Model store needs to communicate with global store. How about wrapping the whole app with global store provider and handing of the communication to component form the ViewModel. To elaborate listening the value change in Component , which uses const {userStore} = useStore() as follows and updates the required global store state. Following is the snippet which does the same

function LoginScreen() {
  const {
    email,
    password,
    appVersion,
    setEmail,
    setPassword,
    isValid,
    setAppVersionText,
    login,
    tokenInformation,
    isLoggedIn,
    isLoading,
  } = useLoginViewModel(); // Local Store
  const { userStore } = useStore(); // Global Store

  useEffect(() => {
    if (isLoggedIn) {
      userStore.setIsAuthenticated(true);
      userStore.setTokens(tokenInformation);
    }
  }, [isLoggedIn, userStore, tokenInformation]);

  const prepareAppVersionText = async () => {
    const [{ appVersion }, update] = await Promise.all([
      codePush.getConfiguration(),
      codePush.getUpdateMetadata(),
    ]);
    setAppVersionText(update, appVersion);
  };

  useEffect(() => {
    prepareAppVersionText();
  }, []);

  return (
    <KeyboardAvoidingView style={styles.container} behavior="padding">
      <View onPress={Keyboard.dismiss}>
        <View style={styles.loginContainer}>
          <View style={[styles.input]}>
            <Input
              testID="username-input"
              label="Username"
              style={styles.textInput}
              placeholderTextColor="#DDD"
              value={email}
              onChangeText={(val) => setEmail(val)}
              autoCorrect={false}
              valid
              autoCapitalize="none"
              keyboardType="email-address"
            />
          </View>
          <View style={[styles.input]}>
            <Input
              testID="password-input"
              label="Password"
              style={styles.textInput}
              placeholderTextColor="#DDD"
              value={password}
              valid
              onChangeText={(val) => setPassword(val)}
              secureTextEntry
            />
          </View>
          <View style={styles.buttons}>
            <View
              style={{
                marginBottom: 20,
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              {isLoading && (
                <ActivityIndicator testID="loader" color={THEME.BLUE_PRIMARY} />
              )}
              {!isValid && (
                <Text style={{ color: "red" }}>
                  Username or password incorrect.
                </Text>
              )}
            </View>
            <MiButton
              testID="signin-button"
              style={styles.buttonPadding}
              color={THEME.BLUE_PRIMARY}
              inverse
              onPress={login}
              title="Sign In"
            />
          </View>
        </View>
      </View>
      <View style={styles.bottomContainer}>
        <Text style={{ marginTop: 20, textAlign: "center", color: "#CCC" }}>
          {appVersion}
        </Text>
      </View>
    </KeyboardAvoidingView>
  );
}

export const Login = observer(LoginScreen);

Can you please help me elaborate the situation you mentioned regarding the sibling stores with an example please (For the situation where ViewModels needs to be moved to global store/ Also will it be partial move like moving only those which are needed or all of them)? Thank you very much. Eagerly waiting for your suggestions . It will really help me for finalizing a Architectural decision for the current project which is to be started. thanks

[coolsoftwaretyler]

@anishmiviewis - sorry, I misspoke. "Sibling" isn't the term I meant. I meant if you have two separate trees, you won't be able to directly modify one from another. Here's an example, which I think actually models your other question about wanting to communicate with the global store. There's a rootStore instance and a user, and we want the user to directly modify some property in rootStore. This is not allowed (you'll see the error in this CodeSandbox): https://codesandbox.io/s/wizardly-violet-vv7qhf?file=/src/index.ts

It's honestly not a huge problem, though. You can expose a lot of that kind of modification through actions anyway. Here's an example where you can make it work with an action on the RootStore model: https://codesandbox.io/s/focused-villani-28phh4?file=/src/index.ts

To say it more simply: most people use MobX-State-Tree as a single tree structure. This is more of a pattern than a rule. But if you use multiple, independent trees in your application, you'll need to be a little more careful when you have them interact.

It looks like you already planned for this, so I honestly think you're in good shape. I'm happy to answer the question, and glad you came to the discussion forum to ask about it, but I think you're in an excellent position to move forward confidently. Your code looks awesome to me, and I think you're going to enjoy this pattern.

[anishmiviewis]

@coolsoftwaretyler thank you very much for quick response. I really appreciate it.

[coolsoftwaretyler]

Happy to help!