标签: mobx-state-tree

我正在使用react和mobx-state-tree，并且@inject用于将商店注入到我的组件中。所以最后，我通过this.props.uiStore组件内部访问商店。

不幸的是，Visual Studio Code无法推断我的商店的类型，因此我没有属性的任何代码完成。我想知道是否可以使用jsDoc它（因为它可以很好地用于方法），但是找不到方法。我在想一些类似的事情：

export default class DeviceMirror extends React.Component {
  /**
   * @namespace
   * @property {object}  props
   * @property {UiStore}  props.uiStore
   */
  props

但这行不通。

我有一堆商店，每个商店都包含一个实体类型的列表，例如

const userStore = EntityStore.create(....)

const supplierStore = EntityStore.create(....)

有些商店可以提供额外的功能，所以我写了

const orderStore = EntityStore
.views(self => ({
    allByUserId: branchId => ....)
}))
.create(....)

到目前为止，一切都很好，但现在我想创建一个“商店经理”，其中包含所有此类商店的列表，但失败并显示如下消息

错误：[mobx-state-tree] 转换 ...
EntityStore 类型的值时出错：(id: Order)> 不可分配给 type: EntityStore，
应为 ... 的实例EntityStore或类似的快照
（请注意，快照提供的值与目标类型兼容）

消息很明确，我的“EntityStore with views”与“EntityStore”的类型不同。但它是它的扩展，所以我想知道是否有声明允许它。像List<? extends EntityStore>Java中的东西？

或者一个很好的解决方法，允许我在EntityStore不改变其类型的情况下添加附加功能？

我想使用 @import 导入节点模块，但 Visual Studio 代码似乎无法获取它。还是我做错了？

我正在尝试克隆引用另一个模型的模型，但我得到：Error: [mobx-state-tree] Failed to resolve reference 'H1qH2j20z' to type 'AnonymousModel' (from node: /usualCustomer)...在克隆中。原版解决没问题。

这是我的模型：

const Job = types.model({
    id: types.optional(types.identifier(types.string), shortid.generate()),
    jobNumber: types.optional(types.string, ''),
    description: '',
    usualCustomer: types.maybe(types.reference(Customer)),
  })

const Customer = types.model({
    id: types.optional(types.identifier(types.string), shortid.generate()),
    name: types.optional(types.string, 'New customer'),
  })

这个函数说明了问题：

editJob = job => {
    console.log('Original', job)
    var newClone = clone(job)
    console.log('Clone', newClone)
}

在 MobX 状态树 (MST) 中执行异步操作的推荐方法是使用flow，它将生成器函数作为第一个参数，其中每个 Promise 都应该产生。

yield expressions are of type any in TypeScript, but is there any way to automatically type a yield expression in MST?

Example

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

type Stuff = { id: string; name: string };

function fetchStuff(): Promise<Stuff[]> {
  return new Promise((resolve) => {
    resolve([
      { id: "1", name: "foo" },
      { id: "2", name: "bar" }
    ]);
  });
}

const Thing = types.model({
  id: types.identifier,
  name: …

我在 React 应用程序中使用带有 Typescript 的 mobx-state-tree。而且，我在使用 Typescript 时遇到了问题，它抱怨 mobx type 的类型types.safeReference。看起来safeReference模型定义中的类型与您.create()实际创建模型实例时使用的类型不同。在我的代码中，selectedProduct的类型被转换为string | number | undefined | nullin productStore，但在模型定义中是IStateTreeNode<...> | undefined | null，这就是我在我的根存储中收到错误的原因。我该如何解决？

这是我的产品商店：

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

const Product = types.model("Product", {
   id: types.identifier,
   name: types.string
})

const ProductStore = types
  .model("ProductStore", {
    products: types.array(Product),
    selectedProduct: types.safeReference(Product),
  })
  .actions((self) => ({
      // actions here
  }));

export const productStore = ProductStore.create({
  products: [],
  selectedProduct: undefined // …

我使用 Axios 来处理一些 API 获取，并且在生成器中执行该调用；async/await不是这个特定项目的选择。由于某种原因，即使axios我的类型正确，any当我使用yield关键字时，打字稿也会推断出类型。

function* foo() {
  // axios.get is returning Promise<AxiosResponse<T>>
  // but data is being inferred as "any"
  const { data } = yield axios.get<T>(url); 
  
  // do some stuff with data
}

如果我专门输入 axios 响应，它工作正常，但我觉得我错过了一些东西，因为 TS 不会自动获取类型

function* foo() {
  const { data }: AxiosResponse<T> = yield axios.get<T>(url); 
  
  // do some stuff with data
}

我还缺少其他步骤或配置吗？

这是我的 tsconfig

function* foo() {
  // axios.get is returning Promise<AxiosResponse<T>>
  // but data …

如果您想以一种固执己见的方式使用 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 ? ( …