mobx-state-tree | Full-featured reactive state management | State Container library

 by   mobxjs TypeScript Version: 5.4.0-pre.1 License: MIT

kandi X-RAY | mobx-state-tree Summary

kandi X-RAY | mobx-state-tree Summary

mobx-state-tree is a TypeScript library typically used in User Interface, State Container, React applications. mobx-state-tree has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

Technically speaking, mobx-state-tree (also known as MST) is a state container system built on MobX, a functional reactive state library.

            kandi-support Support

              mobx-state-tree has a medium active ecosystem.
              It has 6696 star(s) with 625 fork(s). There are 92 watchers for this library.
              There were 8 major release(s) in the last 6 months.
              There are 195 open issues and 952 have been closed. On average issues are closed in 222 days. There are 9 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of mobx-state-tree is 5.4.0-pre.1

            kandi-Quality Quality

              mobx-state-tree has 0 bugs and 0 code smells.

            kandi-Security Security

              mobx-state-tree has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              mobx-state-tree code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              mobx-state-tree is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              mobx-state-tree releases are available to install and integrate.
              Installation instructions, examples and code snippets are available.
              It has 291 lines of code, 0 functions and 177 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of mobx-state-tree
            Get all kandi verified functions for this library.

            mobx-state-tree Key Features

            No Key Features are available at this moment for mobx-state-tree.

            mobx-state-tree Examples and Code Snippets

            No Code Snippets are available at this moment for mobx-state-tree.

            Community Discussions


            react native import Carousel from "react-native-snap-carousel" not working
            Asked 2022-Mar-13 at 20:52

            I install npm i @types/react-native-snap-carousel and version is 3.8.5 My package.json is



            Answered 2021-Dec-17 at 08:10


            MOBX and react integration
            Asked 2022-Jan-07 at 19:52

            getting in valid hook error in a re write of a clients app... (upgrading code)

            mobx 6.3.8 mobx react 7.2.1 and mobx-state-tree 5.0.5 React 17.0.1 RN 0.64.3

            i feel like the error is here. i googled the code line for use stores and it led me to the deprecated site... i dont know where to find new handling in the site... what would this be called?



            Answered 2022-Jan-07 at 19:52

            From that error message:

            Hooks can only be called inside of the body of a function component.

            You are not calling a hook from inside the body of a function component. So you are breaking the rules of hooks.

            According the rules of hooks you can only call a hook from the top level of a react function component. If you are not inside a functional component, then you cannot use a react hook*.

            From the docs:

            Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

            That means you need to call useStores from within a functional component.

            Something like:



            Fast Refresh Issues: The NextJs is not working properly with local package. How can I force to clear cache while developing?
            Asked 2021-Dec-20 at 17:33

            I have an application built with NextJs (and React) and mobx-state-tree (but could be context or redux) as a package manager. All the stores are created and handled in an npm package called SMK (state management kit) that I created to make the sub-stores reusable in my mobile and web application.

            How it works:

            1. Create the sub-store with models, actions and views on the SMK and export it as a module.
            2. Add the SMK using yarn add @my-repo/smk.
            3. Create the root store in my app and import the sub-store from SMK as a child of the root store.
            4. Build and start the app and everything is working well.

            But I need to run and publish the SMK locally to make it easier development. The solution I used to use is yalc.

            Using yalc and running it locally this is the process:

            1. In the SMK, runs yarn start. (This will do nodemon --ignore src/index.ts -e js,ts,tsx,json --watch src/ --exec yalc push --scripts)
            2. In the APP, runs yalc add @my-repo/smk. (This will add a dependency like "@my-repo/smk": "file:.yalc/@my-repo/smk").
            3. In the APP, runs yarn build and then yarn start

            And voila! Everything is working perfect, any change I did locally on my SMK is working perfectly on the APP.

            BUT, when I run yarn dev that do next dev as default of NextJs it doesn't work.

            This is the error I'm facing:

            Error explanation: As I only added the setTestingState and testingState locally, it's saying that it doesn't exist.

            Possible reason: The fast refresh is not refreshing the cache properly.

            I've tried:

            • Add // @refresh reset to force it, but didn't work.
            • Stop and start the application.
            • Build, start and then run dev. (works for build and not for dev)

            What is the solution/workaround to solve this issue with yarn dev and yalc?



            Answered 2021-Dec-20 at 17:33

            Looks like it's a bug on NextJs and we can find some devs asking to NextJs to allow us to disable the Fast Refresh, and looks like they don't care or just don't have the intention to change it.

            So, I found a third-party library, next-remote-watch, that is solving this issue for me. Basically, is an alternative script to use instead of next dev and it will do a quick and simply build and active a watcher.

            At package.json use



            undefined action call from userstore
            Asked 2021-Dec-10 at 18:37

            3.5 and Expo version 43

            we are moving an existng code file over to use in expo our user store model... having a hard time reaching the .actions items and no idea how to research this.

            example code of where we are trying to use the action in



            Answered 2021-Dec-10 at 18:37

            Adding my comment that helped as an answer:

            You're using a context in



            react native typescript screen test returning Test suite failed to run AsyncStorage is null
            Asked 2021-Dec-06 at 15:23

            I am experiencing difficulty writing tests for react-native typescript screen using instructions from the URL below

            I keep getting the below error

            FAIL app/screens/login/login-screen.test.tsx ● Test suite failed to run



            Answered 2021-Dec-06 at 15:23

            Based on your package.json dependencies you dont have the @react-native-async-storage dependency, you have @react-native-community/async-storage, which is the old organisation namespace.

            Try doing



            React Native change state leads to mobx-state-tree exception
            Asked 2021-Sep-29 at 14:17

            I have a problem with changing the value in my state. I have



            Answered 2021-Sep-29 at 14:11

            From mobx-state-tree document:

            By default, nodes can only be modified by one of their actions, or by actions higher up in the tree.

            You put your tags in a global state which is an immutable object. so avoid changing your global state via inline codes in your component.

            you can define propper actions and dispatch them for those changes.

            for more information about the actions in mobx-state-tree look at the documentation.



            Why we can use any prop name in function react without explicit mention?
            Asked 2021-Sep-09 at 03:36

            I'm learning mobX-state-tree, and in their tutorial code, i see this



            Answered 2021-Sep-09 at 03:36

            You should post what are you trying to do, but i think you need to understand the basics of javascript object and how react works.

            You can use any name as a prop. But if you choose prop={any object}. You have to use it inside your app observer as:



            Mobx with TypeScript incompatible types error
            Asked 2021-Jul-31 at 18:44

            I am trying to set the vehicles array to the array that I am getting from the store. However, it seems that Typescript is complaining about something.

            My model looks like this:



            Answered 2021-Jul-31 at 18:44

            It seems your types for useState are incorrect. It should be:



            Update language using react-intl and mobx state tree
            Asked 2021-May-31 at 12:29

            it's the first time I use react-intl with Mobx state tree.

            Basically I have two buttons in the header (it and en) that on click set the current language saved in a Mobx State Tree variable.

            Something like this.

            In my state:



            Answered 2021-May-31 at 11:31

            Lots of ways to solve it, for example I think you can wrap IntlProvider in Observer (docs) component to make it reactive:



            Observer does not work for recursive items
            Asked 2021-May-13 at 20:50

            I'm really stuck with the problem. I have a nested menu. After click on the first menu level second level items shows up. After click on one of the children nothing happens. Looks like the observer don't work for deep levels items. I don't know if the "late" type could be a problem. Everything is described in the code:

            Thanks in advance



            Answered 2021-May-12 at 11:42

            The problem is that when you are using your recursive TreeItem component it is not actually observer. You wrapping it in observer only when exporting, but TreeItem inside TreeItem is regular component, not observer so it doesn't react to anything.

            Basically you just need to move observer decorator:


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install mobx-state-tree

            See the Getting started tutorial or follow the free course. 👉 Official docs can be found at


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i mobx-state-tree

          • CLONE
          • HTTPS


          • CLI

            gh repo clone mobxjs/mobx-state-tree

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link

            Consider Popular State Container Libraries


            by reduxjs


            by vuejs


            by mobxjs


            by redux-saga


            by Meituan-Dianping

            Try Top Libraries by mobxjs


            by mobxjsTypeScript


            by mobxjsTypeScript


            by mobxjsTypeScript


            by mobxjsJavaScript


            by mobxjsTypeScript