Mobx @ вычисляемые функции с параметрами

Я новичок в Mobx, но пока он работает отлично, и мне удалось продвинуться довольно далеко. У меня есть приложение с поддержкой реакции с mobx и mobx-persist. Я использую аксиомы для извлечения сообщений с сайта Wordpress. Функциональность, которую я пытаюсь улучшить, - это функция «добавить в избранное».

Вот мой магазин сообщений:

export default class PostsStore {

// Define observables and persisting elements
@observable isLoading = true;
@persist('list') @observable posts = [];
@persist('list') @observable favorites = [];

// Get posts from Wordpress REST API
@action getPosts() {
  this.isLoading = true;
  axios({
    url: 'SITE_URL',
    method: 'get'
  })
    .then((response) => {
      this.posts = response.data
      this.isLoading = false
    })
    .catch(error => console.log(error))
}

// Add post to favorites list, ensuring that it does not previously exist
@action addToFavorites(id) {
  if (this.favorites.indexOf(id) === -1) {
    this.favorites.push(id);
  }
}

// Remove post from favorites list, ensuring that it does indeed exist
@action removeFromFavorites(id) {
  if (this.favorites.indexOf(id) !== -1) {
    this.favorites.remove(id);
  }
}

}

В моем компоненте «Избранное», который предназначен для отображения кнопки для добавления или удаления из избранного, я подумал, что использование функции @computed было бы предпочтительнее для определения того, имеет ли текущая визуализируемая публикация «идентификатор», который был добавлен в наблюдаемый массив избранных. Однако кажется, что @computed функции не разрешено принимать аргументы (минимальным параметром будет 'id' сообщения, чтобы оценить, находится ли он в наблюдаемом массиве избранного. Я могу выполнить тест, используя @action, но это не ' Кажется, что я немедленно обновляю отображаемый экран, что и является целью.Как показывает приведенный ниже код, я вынужден выполнить тест с оператором if в визуализации компонента.

render () {
  if (this.props.postsStore.favorites.includes(this.props.item.id)) {
    return (
      <Button
        onPress={() => this.props.postsStore.removeFromFavorites(this.props.item.id)}
        title="★"
      />
    )
  }

Влияет ли это на производительность моего приложения? Есть ли @computed способ делать то, что я хочу? Я должен просто не беспокоиться об этом, раз уж он вроде работает?


react-native mobx mobx-react
person Johnson Smithson    schedule 21.03.2018    source источник
comment
Ваш PostsStore @observer?   -  person Geoff Cox    schedule 22.03.2018
comment
Да, это так. Это сработало: @computed get isFavorite () {return createTransformer (id = ›this.favorites.includes (id))}   -  person Johnson Smithson    schedule 28.03.2018

Ответы (3)


arrow_upward
7
arrow_downward

Это сработало:

@computed get isFavorite() {
   return createTransformer(id => this.favorites.includes(id))
}

Называется, на мой взгляд, так:

this.props.postsStore.isFavorite(this.props.item.id)
person Johnson Smithson    schedule 28.03.2018

arrow_upward
4
arrow_downward

Просто для полноты: mobx-utils предоставляет способ использования аргументов в вычисляемых функциях с помощью Теперь. Вы можете использовать computedFn и объявить свою функцию следующим образом:

isFavorite = computedFn(function isFavorite(id) {
    return this.favorites.includes(id)
})

Взгляните на статью в документации. .

person Sandrogo    schedule 08.05.2020

arrow_upward
2
arrow_downward

Я не уверен, что @computed здесь необходим, поскольку он будет создавать новый createTransformer при каждом вызове после this.favorites изменений.

Это должно привести к тому же результату с использованием только одного createTransformer

isFavorite = id => createTransformer(id => this.favorites.includes(id))
person Ryan King    schedule 07.06.2019