Skip to content

[QUESTION] Observe is only called once instead of everytime something changes in the store #165

Open
@MinThaMie

Description

@MinThaMie

The goal is that some items can become favorite and are then rendered in a special list.

But my code does not work cause the observer just works once. Have this problem more often so somehow my implementation of observe isn't correct.

First the user clicks on a listitem with calls upon an action:

export default class LibraryItem extends React.Component {
    constructor(){
        super();
        this._addFavorite = this._addFavorite.bind(this);
    }
    _addFavorite(bid){
        var id = bid;
        libraryBlockActions.addFavorites({ bid : id });
    }

    render() {
//      console.log('render favoritelist state',this.state.favoriteList);
        var bid = this.props.bid;
        return(
            <ListItem primaryText={this.props.title} onTouchTap={this._addFavorite.bind(this, bid)} />
        );
    }

}
export function addFavorites(bidObj) {
    console.log('actionkey:', bidObj);
//  reactor.dispatch(actionTypes.ADD_FAVO, bidObj);
    reactor.dispatch(actionTypes.SWITCH_FAVO, bidObj);
}

This reaches the store:

var favoriteList = [];

function switchFavorite(state, payload, type ) {
    console.log("switched favorites bID:", payload.bid);
    var block = payload.bid;
    if (favoriteList.indexOf(block) === -1) {
        favoriteList.push(block);
        console.log("favolist", favoriteList);
    }
    else {
        var index = favoriteList.indexOf(block);
        favoriteList.splice(index, 1);
        console.log("favolist", favoriteList);
    }
    return favoriteList;
}

class FavoriteStore extends Store {

    constructor(props) {
        super(props);
    }

    getInitialState() {
        return toImmutable([]);
    }

    initialize() {
        this.on(actionTypes.SWITCH_FAVO, switchFavorite);
    }
}

const INSTANCE = new FavoriteStore();
export default INSTANCE;

Getter:

export const favoriteBlocks = [
    ['favoritesList'],
    (favoriteblocks) => {
        console.log('GETTER favoriteblocks',favoriteblocks);
        return favoriteblocks;
    }
];

and then the observer is called:

export default class FavoriteList extends React.Component {
    constructor(){
        super();
        this.state = {
            favoritesList: reactor.evaluate(favoriteListGetters.favoriteBlocks).favoritesList
        };
    }
    componentDidMount() {
        reactor.observe(favoriteListGetters.favoriteBlocks, (favoriteblocks) => {
            console.log('reactor observe favoriteblocks', favoriteblocks);
            this.setState({favoritelist: favoriteblocks});
            console.log('favoritelist:', this.state);
        });
    }
    render() {

        //TODO: Render the items added to the list
        return(
                <div>
                    <List subheader="Favo's" subheaderStyle={{ fontSize: 18}}>
                        {this.state}
                    </List>
                </div>
        );
    }

}

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions