CODEWITHSUNDEEP
javascriptreactjsmobx
pyprism
pyprism

Reputation: 3008

Mobx store changes not reflected in browser

After api call store data changes are not reflecting in the view, here are the codes:

store.js

import axios from 'axios';
import {encrypt, decrypt} from '../utils/pgp.js'
import {observable, action, computed, runInAction} from "mobx";


export var appState = observable({
    bunny: []
});

appState.loadBunny = action(function(bugs){
    bugs.forEach(async data => {
        let temp = {};
        temp['id'] = data.id;
        temp['site_url'] = data.site_url;
        temp['tag'] = data.tag;
        temp['email'] = await decrypt(sessionStorage.getItem('key'), data.email);
        temp['username'] = await decrypt(sessionStorage.getItem('key'), data.username);
        temp['password'] = await decrypt(sessionStorage.getItem('key'), data.password);
        temp['note'] = await decrypt(sessionStorage.getItem('key'), data.note);
        temp['created_at'] = data.created_at;
        temp['updated_at'] = data.updated_at;
        runInAction("update state after decrypting data", () => {
            this.bunny.push(temp);
        });

    });
});

appState.fetch = async function() {
    let xoxo = await axios.get('/api/vault/', {
        headers: {'Authorization': "JWT " + sessionStorage.getItem('token')}
    });
    this.loadBunny(xoxo.data);
}

app.js

ReactDOM.render(
    <Router history={browserHistory} >
            <Route path="passwords" store={appState} onEnter={keyRequired} component={PasswordsTable} />
        </Route>
    </Router>,
    document.getElementById('app')
);

PasswordsTable.js

import React from 'react';
import axios from 'axios';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import {observer} from 'mobx-react';


@observer
export default class Passwords extends React.Component {

    componentDidMount = () => {
        this.props.routes[1].store.fetch();
    }

    render() {
        return (
            <div>
            <BootstrapTable data={this.props.routes[1].store.bunny} striped={true} hover={true} condensed={true} pagination={true} search={true}>
                <TableHeaderColumn dataField="id" isKey={true}>ID</TableHeaderColumn>
                <TableHeaderColumn dataField="site_url" dataSort={true}>URL</TableHeaderColumn>
                <TableHeaderColumn dataField="email">Email</TableHeaderColumn>
                <TableHeaderColumn dataField="username">Username</TableHeaderColumn>
                <TableHeaderColumn dataField="password">Password</TableHeaderColumn>
                <TableHeaderColumn dataField="note">Note</TableHeaderColumn>
                <TableHeaderColumn dataField="tag">Tag</TableHeaderColumn>
                <TableHeaderColumn dataField="created_at">Created At</TableHeaderColumn>
                <TableHeaderColumn dataField="updated_at">Updated At</TableHeaderColumn>
            </BootstrapTable>
            </div>
            )
    }
}

Upvotes: 2

Views: 684

Answers (1)

mweststrate
mweststrate

Reputation: 4978

since bootstrap table is not an observer component it can not react to observable data. give it plain daya instead by calling .slice () or using mobx.toJS on the bunny array in your render method

Upvotes: 3

Related Questions