如何使用mobx-react定义mobx store中的操作？

Question

我在youtube上关注了几个教程，几乎从来没有见过任何人明确定义一个动作来改变他们在商店中的状态。我一直在做同样的事情，虽然它100%有效，但它在react native上抛出了一个警告。我只是想知道你如何定义某个东西是一个动作，也许有人有一个很好的方法将动作分离到一个不同的文件中。这是我的店。

export function createCurrencyStore() {
  return {
    currencies: [
      'AED',
      'ARS',
      'AUD',
    ],
    selectedCurrencyFrom: 'USD',
    selectedCurrencyTo: 'EUR',
    loading: false,
    error: null,
    exchangeRate: null,
    amount: 1,
    fromFilterString: '',
    fromFilteredCurrencies: [],
    toFilterString: '',
    toFilteredCurrencies: [],

    setSelectedCurrencyFrom(currency) {
      this.selectedCurrencyFrom = currency
    },

    setSelectedCurrencyTo(currency) {
      this.selectedCurrencyTo = currency
    },

    async getExchangeRate() {
      const conn = await fetch(
        `https://api.exchangerate-api.com/v4/latest/${this.selectedCurrencyFrom}`
      )
      const res = await conn.json()
      console.log(res)
      this.exchangeRate = res.rates[this.selectedCurrencyTo]
    },
    setFromFilters(string) {
      this.fromFilterString = string
      if (this.fromFilterString !== '') {
        this.fromFilteredCurrencies = this.currencies.filter((currency) =>
          currency.toLowerCase().includes(string.toLowerCase())
        )
      } else {
        this.fromFilteredCurrencies = []
      }
    },
    setToFilters(string) {
      this.toFilterString = string

      if (this.toFilterString !== '') {
        this.toFilteredCurrencies = this.currencies.filter((currency) =>
          currency.toLowerCase().includes(string.toLowerCase())
        )
      } else {
        this.toFilteredCurrencies = []
      }
    },
  }
}

Answer 1

几乎从未见过任何人显式地定义一个动作

嗯，这很奇怪，因为这是一件很常见的事情，只通过操作来改变状态，以避免意外的突变。在MobX6中，默认情况下会强制执行操作，但您可以使用configure方法禁用警告：

import { configure } from "mobx"

configure({
    enforceActions: "never",
})

是将操作分离到不同文件中的好方法

你真的不需要这样做，除非它是一个非常特殊的情况，你需要以某种方式重用动作或类似的东西。通常，您将动作和它们一起修改的状态保留在一起。

我不太确定你对createCurrencyStore的结果做了什么，你会把它传递给observable吗？无论如何，在MobX6中创建商店的最好方法是使用makeAutoObservable (如果需要进行一些微调，也可以使用makeObservable )。所以如果你没有使用类，那么它看起来会是这样的：

import { makeAutoObservable } from "mobx"

function createDoubler(value) {
    return makeAutoObservable({
        value,
        get double() {
            return this.value * 2
        },
        increment() {
            this.value++
        }
    })
}

这样，每个getter都会变成computed，每个方法都会变成action，所有其他值基本上都是observable。

有关更多信息，请访问：https://mobx.js.org/observable-state.html

更新：

由于您的getExchangeRate函数是异步的，因此您需要在内部使用runInAction，或者在单独的操作中处理结果，或者使用一些其他方法来处理异步操作：

import { runInAction} from "mobx"


 async getExchangeRate() {
      const conn = await fetch(
        `https://api.exchangerate-api.com/v4/latest/${this.selectedCurrencyFrom}`
      )
      const res = await conn.json()

      runInAction(() => {
        this.exchangeRate = res.rates[this.selectedCurrencyTo]
      })
      // or do it in separate function
      this.handleExchangeRate(res.rates[this.selectedCurrencyTo])
    },

有关异步操作的更多信息：https://mobx.js.org/actions.html#asynchronous-actions