如何使用mobx-react在mobx存储中定义动作？

如何解决如何使用mobx-react在mobx存储中定义动作？

一直在关注youtube上的一些教程，几乎从未见过有人明确定义一种改变他们刚刚进入商店状态的动作。我一直在做同样的事情，并且当它100％工作时，它会在本机反应上发出警告。只是想知道如何定义某件事是一个动作，也许有人是否有很好的方法将这些动作分离到另一个文件中。这是我的商店。

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 = []
      }
    },}
}

解决方法

几乎从未见过有人明确定义动作

好吧，这很奇怪，因为很常见的事情是仅通过操作来改变状态以避免意外的改变。在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++
        }
    })
}

这样，每个吸气剂将变成computed，每个方法将变成action，而所有其他值基本上将是observable s。

文档中的更多信息：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