CODEWITHSUNDEEP
javascriptreactjstypescriptmobxmobx-react
Strawberry Bunny
Strawberry Bunny

Reputation: 45

Why isn't this mobx-react observer firing a render?

Note, I am using Typescript.

In my store I have a field specified as so:

@observable public characters: {[name: string] : Types.Character} = {};

Types.Character is defined:

export class Character {
    name: string;
    gender: Gender;
    @observable status: Status;
    @observable statusmsg: string;
}

And I have a React component marked as observer:

@observer
export default class NamePlate extends React.Component<INamePlateProps, {}> {

    render(){
        let char: Types.Character = chatStore.characters[this.props.characterName];

        let textStyle: Object = {
            color: Types.getGenderColourFromString(char.gender)
        };

        return <div className="comp-nameplate" title={char.statusmsg}>
            <img src={`images/status-small-${char.status}.png`}/>
            <span className="nameplatecharname" style={textStyle}>{char.name}</span>
        </div>;
    }

}

I am changing the char.statusmg and char.status properties but the observer component is not re-rendering.

private receiveSTA(obj: Packets.IReceivePacketSTA){
    let char: Types.Character = this.characters[obj.character];       
    char.status = Types.getStatusTypeFromString(obj.status);
    char.statusmsg = obj.statusmsg;
}

I'd guess that the problem is to do with how the observable is nested down in an object in my store? I have no idea. I've found getting to grips with this set-up extremely difficult and hard to find information for. There's so many competing set-ups of mobx, react and mobx+react that most material is out-right wrong at worst and misleading at best.

I am using the latest versions of Typescript, react, react-dom, mobx and mobx-react.

Upvotes: 2

Views: 1052

Answers (1)

mweststrate
mweststrate

Reputation: 4978

MobX does not support dynamic addition / removal of keys on objects. For dynamically keyed objects maps should be used, so:

characters = observable.map<Character>()

See https://mobx.js.org/refguide/map.html

In general any not too opionated react boilerplate works for mobx, as it is trivial to add to an existing object. So I tend to not use any boiler plate at all, or, for a quick setup, create-react-app + react-app-rewired to add decorator support

Upvotes: 1

Related Questions