У меня много магазинов, и изменение одного из них не приводит к изменению компонента рендеринга, пока не изменится состояние компонента.
Я думал, что я использую неправильный наблюдатель, но тот же код работает в другом магазине.
код магазина:
import invariant from 'invariant'
import { action, computed, observable } from 'mobx'
import { postData } from '../utils/api-helpers'
import {
ActionStatus,
IConfigurationStore,
ITag,
ITagsStore,
IUserStore,
TagType
} from '@@types'
export class Tag implements ITag {
@observable
public id: string
@observable
public tag: string
constructor(tag: TagType) {
this.id = tag.id
this.tag = tag.tag
}
}
export class TagsStore {
public readonly storeName: string = 'Tag'
public configuration: IConfigurationStore | null = null
@observable public items: ITag[] = []
private storage: Storage | null = null
@action
public setConfiguration = async (configuration: IConfigurationStore): Promise<void> => {
invariant(!!configuration.config, 'КConfiguration wasnt initialized correctly')
this.configuration = configuration
this.storage = new Storage(this.configuration!.config!)
await this.fetchAll()
}
@action
private fetchAll = async () => {
const response = await postData(
this.configuration!.createBackendUrl('/tags', this.configuration!.config!.ENDPOINTS.API!),
{
method: 'GET',
phone: (this.configuration!.stores.user as IUserStore).credentials.phone,
token: (this.configuration!.stores.user as IUserStore).token,
}
)
if (response.data.code === 409) {
;(this.configuration!.stores.user as IUserStore).logout()
} else {
response.data.data.attributes.tags.forEach((tag: TagType) => {
this.items.push(new Tag(tag))
})
}
}
}
и компонент:
import { withStyles } from '@material-ui/core'
import { inject, observer } from 'mobx-react'
import React from 'react'
import uuid from 'uuid'
const styles: any = {
actions: {
bottom: '0',
position: 'absolute',
width: '100%',
},
form: {
display: 'flex',
flexDirection: 'column',
width: '100%',
},
inputRow: {
marginLeft: '20px',
},
}
inject('tags', 'dumkas', 'errors', 'configuration')
@observer
export class NewDumka extends React.Component<Props, State> {
public state: State = {
form: { ... },
}
private inputs: string[]
constructor(props: Props) {
super(props)
this.inputs = [uuid.v4(), uuid.v4(), uuid.v4()]
this.props.dumkas!.newDumka().then(newDumka => {
this.state = {
form: { ... },
}
})
}
public render() {
const { classes, tags } = this.props
return (
tags!.items.map(tag => tag.title}
)
}
}
export default withStyles(styles)(NewDumka)
Есть реквизиты будут отображаться только при изменении состояния в форме.
Реквизит, как и ожидалось, не перехватывается в componentWillReceiveProps
.