Как импортировать дерево состояний Mobx и ссылаться на его значения в файле Typescript без компонента? - PullRequest
Новая
       13

Как импортировать дерево состояний Mobx и ссылаться на его значения в файле Typescript без компонента?

0 голосов
/ 31 января 2019

Я хочу использовать значения в MST в стандартном машинописном документе.У него нет компонента, только объект значений CSS, на который ссылаются теги стиля элементов в других компонентах.Это возможно?Если да, то как мне это сделать?

edit: Вот код

Mobx State Tree 

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

export const BotCSS = types.model({
  chatBackground: types.optional(types.string, '#fff'),
  fontType: types.optional(types.string, 'Open Sans'),
  hoverFillColor: types.optional(types.string, '#306aca'),
  hoverFontColor: types.optional(types.string, '#f2f2f2'),
  primaryColor: types.optional(types.string, '#427ee1'),
  secondaryColor: types.optional(types.string, '#f2f2f2'),
  typingAnimationDots: types.optional(types.string, '#427ee1'),
  typingAnimationFill: types.optional(types.string, '#f2f2f2'),
  userResponseColor: types.optional(types.string, '#427ee1')
})

export type IBotCSS = typeof BotCSS.Type

тема.ts документ с темой obj - я хочу установить значения mobx, равные некоторым из этих переменных 

const userMessageBackgroud = `${blue}`
const userMessageBorder = `${blue}`
const userMessageColor = `${white}`

const minimizeboxBackgroud = `${blue}`
const minimizeboxColor = `${white}`

export const theme = {
  AgentBar: {
    Avatar: {
      size: '42px'
    },
    css: {
      backgroundColor: `${secondaryColor}`,
      borderColor: `${avatarBorderColor}`
    }
  },
  AvatarImg: {
    backgroundColor: 'transparent',
    border: 'none',
    borderRadius: 0,
    height: '38px',
    width: '40px'
  }, (...etc)

Так что, по сути, в верхней части этого документа theme.ts есть ряд переменных, которыеиспользуется в объекте темы.Я хочу установить значения в mobx равными объявлениям переменных в верхней части документа

Ответы [ 2 ]

0 голосов
/ 02 марта 2019

Прежде всего вы должны понимать, что MobX и MST являются полностью автономными библиотеками управления состоянием и могут отлично работать сами по себе, без какой-либо инфраструктуры компонентов.

Во-вторых, вы не можете просто установить значения для свойств в хранилище напрямую.в MST ( сначала создайте экземпляр магазина между прочим, например: const botCss = BotCSS.create()).Для этого вам нужно определить выделенные сеттеры (или actions в терминологии MobX).Что-то вроде: 

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

export const BotCSS = types.model({
  chatBackground: types.optional(types.string, '#fff'),
  fontType: types.optional(types.string, 'Open Sans'),
  hoverFillColor: types.optional(types.string, '#306aca'),
  hoverFontColor: types.optional(types.string, '#f2f2f2'),
  primaryColor: types.optional(types.string, '#427ee1'),
  secondaryColor: types.optional(types.string, '#f2f2f2'),
  typingAnimationDots: types.optional(types.string, '#427ee1'),
  typingAnimationFill: types.optional(types.string, '#f2f2f2'),
  userResponseColor: types.optional(types.string, '#427ee1')
})
.actions(self => {
  setCss(data) {
    Object.assign(self, data);
  }
})

export const botCss = BotCSS.create() // you might even export the instance itself

export type IBotCSS = typeof BotCSS.Type

Затем в другом модуле вы можете импортировать экземпляр или тип (, а затем создать экземпляр ) и вызвать установщик с новыми значениями: 

import { botCss } from './BotCSS'

botCss.setCss({
   chatBackground: '#ff0000'
});
0 голосов
/ 01 февраля 2019

Итак, вы забыли создать магазин, и для изменения состояния ваших полей в вашем магазине вам необходимо создать методы («действия»).

Вот образец

...