Meteor with React / Redux problem with state db

help
1

Hey guys, I’m kind of new in Meteor and programming. I work on a little project for learning, in my project I use React and Redux.

Everything is find I understand the data part etc with Meteor but I’m confused about something. I try to favorites a contractor. It’s ok a make a methods and update the document with favorite: true but my problem is my state from Redux loose when I refresh. You think that can be a good idea if I use localStorage and make a array of contractor like ?

contractorActionFavorites.js

import { Meteor } from 'meteor/meteor';
import * as types from '../../constants';

export const addContractorFavorite = contractor => {
  Meteor.call('addContractorFavorites', contractor._id);
  return {
    type: types.ADD_CONTRACTOR_TO_FAVORITE,
    payload: contractor,
  };
};

export const removeContractorFavorite = id => {
  Meteor.call('removeContractorFavorites', id);
  return {
    type: types.REMOVE_CONTRACTOR_TO_FAVORITE,
    payload: id,
  };
};

favoriteContractorsReducer.js

import * as types from '../constants';

export const favoriteContractorsReducer = (state = [], action) => {
  switch (action.type) {
    case types.ADD_CONTRACTOR_TO_FAVORITE:
      return [
        ...state,
        action.payload,
      ];
    case types.REMOVE_CONTRACTOR_TO_FAVORITE:
      return state.filter(item => item._id !== action.payload);
    default:
      return state;
  }
};

methods.js

import { Meteor } from 'meteor/meteor';
import { Contractors } from './contractors';

Meteor.methods({
  addContractor(contractor) {
    const newContractor = Contractors.insert({
      name: contractor.name,
      description: contractor.description,
      city: contractor.city,
      province: contractor.province,
      favorite: false,
      slug: contractor.slug,
    });
    return newContractor;
  },
});

Meteor.methods({
  addContractorFavorites(id) {
    Contractors.update(id, {
      $set: {
        favorite: true,
      },
    });
  },
});

Meteor.methods({
  removeContractorFavorites(id) {
    Contractors.update(id, {
      $set: {
        favorite: false,
      },
    });
  },
});

Recommended.js this is the component

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as favoriteActions from '../../../../../../actions/contractors/contractorFavorite';
import { Icon, MenuItem } from 'semantic-react';

const Recommended = ({ contractor, favoriteContractors, actions }) => {
  handleLiked = contractor => {
    actions.addContractorFavorite(contractor);
  };
  removeLiked = id => {
    actions.removeContractorFavorite(id);
  };
  return (
    <div>
      {favoriteContractors.find(item => item._id === contractor._id) ?
        <MenuItem onClick={() => this.removeLiked(contractor._id)}>
          <Icon name="heart red" size="large" /> Unrecommended
        </MenuItem> :
        <MenuItem onClick={() => this.handleLiked(contractor)}>
          <Icon name="outline heart red" size="large" /> Recommended
        </MenuItem>
      }
    </div>
  );
};

const mapState = state => ({ favoriteContractors: state.favoriteContractors });

const mapDispatch = dispatch => ({ actions: bindActionCreators(favoriteActions, dispatch) });

export default connect(mapState, mapDispatch)(Recommended);

P.S sorry for my english