标签: mobx-state-tree

我需要在 React Native 中保留一个 MST Store。数据很少更改。

我对使用 AsyncStorage 和 AutoRun 感到困惑。

我在 NextJS 应用程序上使用 mobx-state-tree 进行服务器端渲染。仅在服务器上，我获取 API 来加载一些信息并添加到我的商店。但是在客户端加载之后，我的存储被清除，因为我需要在服务器和客户端上实例化。这是我的问题。

我的商店：

const Store = types
  .model('Store', {
    user: types.compose(User),
  });

const createStore = Store.create({
  user: {},
});

let store = null;

/**
 * Init store
 *
 * @param {bool} isServer
 * @param {object} snapshot
 */
const initStore = (isServer, snapshot = null) => {

  if (isServer) {
    store = createStore;
  }

  if (store === null) {
    store = createStore;
  }

  if (snapshot) {
    applySnapshot(store, snapshot);
  }

  return store;
};

我在客户端的组件：

  static getInitialProps({ req …

如果您想以一种固执己见的方式使用 mobx 进行状态管理，则官方 Mobx 页面上推荐了这两种方法。

基于这些（1、2 ）， keystone看起来像是状态树的改进。拥有状态树所拥有的一切以及更多。我在任何地方都找不到状态树具有而梯形图没有的任何东西。

我发现 keystone 远没有 state-tree 那么成熟。这可能是阻止我选择它的主要原因。状态树相对于梯形校正还有哪些优点？

PS 它将在 React 应用程序中使用。

我在我的项目中设置了 HMR，它对于我的大多数应用程序（电子、webpack、react）都运行良好。

唯一的问题： module.hot.accept 回调永远不会被调用，因此对于热替换我的数据存储，它不起作用。我实际上想知道 HMR 适用于 React 等，即使没有调用处理程序。有任何想法吗？

当我更改文件时，日志看起来是正确的：

[WDS] App updated. Recompiling...
09:41:43.883 index.js?69b4:3671 [WDS] App updated. Recompiling...
09:41:46.703 index.js?69b4:3671 [WDS] Warnings while compiling.
...
09:41:46.706 index.js?69b4:3671 [WDS] App hot update...
09:41:46.708 index.js?69b4:3671 [HMR] Checking for updates on the server...
09:41:47.095 index.js?69b4:3671 [HMR] Updated modules:
09:41:47.097 index.js?69b4:3671 [HMR]  - ./app/stores/UiStore.js
09:41:47.098 index.js?69b4:3671 [HMR] App is up to date.

// main.js:
...
import UiStore from './stores/UiStore'
import App from './App'

   if (module.hot) {
      // @ts-ignore
      module.hot.accept('./stores/UiStore', () => { …

我正在尝试根据isAuthenticated状态渲染某些导航堆栈。我遇到的问题是AppNavigator仅在第一次渲染时渲染，而不进行任何其他更改，我不确定为什么。我尝试在AppNavigator组件中使用 useEffect 来设置辅助本地状态，isAuthenticated但没有执行回调。我把所有相关的内容都放在下面了。我很感激任何建议。

AppNavigator我的文件中正在渲染一个app.tsx。

  return (
    <ToggleStorybook>
      <ApolloProvider client={client}>
        <RootStoreProvider value={rootStore}>
          <SafeAreaProvider initialMetrics={initialWindowMetrics}>
            <ErrorBoundary catchErrors={"always"}>
              <AppNavigator
                initialState={initialNavigationState}
                onStateChange={onNavigationStateChange}
              />
            </ErrorBoundary>
          </SafeAreaProvider>
        </RootStoreProvider>
      </ApolloProvider>
    </ToggleStorybook>
  )

正在AppNavigator回归

export const AppNavigator = (props: NavigationProps) => {
  const { isAuthenticated } = useStores()
  const colorScheme = useColorScheme()
  useBackButtonHandler(canExit)

  return (
    <NavigationContainer
      ref={navigationRef}
      theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
      {...props}
    >
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        {isAuthenticated ? ( …

我正在尝试使用 Mobx 状态树在 reactjs 中创建导航。

现在我有一个带有图标列表的细长垂直导航栏。现在我想做的是向某些菜单项添加子菜单项。当这些被点击时，导航从窄变宽（即展开）并显示子菜单项。一旦用户点击其中一个，Nav 就会返回到瘦版。

我认为我需要的是一种方法，当在我的父商店中单击一个图标时，一个标志会被设置为“展开”，但我不知道当一个孩子被单击时如何设置它。

import { types } from "mobx-state-tree";
import NavItem from "./NavItem.js";
const NavStore = types
  .model("NavStore", {
    expanded: false,
    nav_items: types.array(NavItem)
  })
  .actions(self => ({}))
  .views(self => ({}))
  .create({

  });

export default NavStore;


import { types } from "mobx-state-tree";

const NavItem = types
  .model("NavItem", {
     expands: false,
     title: types.string
  })
  .actions(self => ({
    itemClicked() {

    }
  }))
  .views(self => ({}));

export default NavItem

我有一个 Mobx 状态树模型已经长得太长了，我想将它拆分到多个 javascript 文件中。

下面是部分代码的演示：

///file1.js
 import { types } from "mobx-state-tree";

export const ExampleModel = types
.model("Example", {
    id: types.identifier,
    name: types.optional(types.string, ""),
    anotherName: types.optional(types.string, ""),

})
.views(self => ({
    get test() {
        return "test"
    }
}))
.views(self => ({
    get anotherTest() {
        return "anotherTest"
    }
}))
.actions(self => ({
    setName(name) {
        self.name = name
    }
}))
.actions(self => ({
    setAnotherName(name) {
        self.anotherName = name
    }
}))

我想要的是将其拆分为两个文件，例如：

///file1.js
import { types } from "mobx-state-tree";

export const ExampleModel …

我有这个基本模型。

const stuff = types.model({
  term: types.string,
  excludeTerm: types.string,
  stores: types.array(types.string)
}).actions(self => ({
  setTerm(term: string) {
    self.term = term
  },
  setExcludeTerm(term: string) {
    self.excludeTerm = term
  },
  setStores(stores: string[]) {
    self.stores = stores   // <<< the lint error is on this line
  }
}))

我收到以下TS Lint错误：

Type 'string[]' is not assignable to type 'IMSTArray<ISimpleType<string>> & IStateTreeNode<IArrayType<ISimpleType<string>>>'. Type 'string[]' is missing the following properties from type 'IMSTArray<ISimpleType<string>>': spliceWithArray, observe, intercept, clear, and 4 more.ts(2322)

这是一个令人讨厌的错误。我可以这样分配来修复它：(self as any).stores = stores …

在我看来，人们正在互换使用model和props。我尝试查找有关道具的文档但失败了。有人可以告诉我有什么区别吗？

我已经有了一些接口,我想用这个接口来描述模型,就像下面的代码一样.否则,我必须通过再次使用写types的mobx-state-tree.但这不是正确的方法,什么是有效的解决方案？

    import { types } from 'mobx-state-tree';

    export interface IPeople {
      name: string;
      age: number;
    }

    const Peoples = types
      .model({
        name: 'peoples',
        nancy: IPeople, // error at this line
      })

    export default Peoples;