ShakaCode | ShakaCode Blog | Rails On Maui Blog | Rails | ReactJs | JavaScript | Webpack | Productivity |

Could not find store registered with name 'view'. Registered store names include [ ]. Maybe you forgot to register the store?


#1

Hello,

I’m trying to adopt react_on_rails in my project, but when trying to use the redux store I’m getting the following error:

Could not find store registered with name 'view'. Registered store names include [  ]. Maybe you forgot to register the store?

below my container:

import { connect } from "react-redux";
import Project from "../components/Project";
import * as activitiesActionsCreators from "../actions/activitiesActionsCreators";

const mapStateToProps = state => {
  return { activities: state.activities, page: state.page };
};

export default connect(mapStateToProps, activitiesActionsCreators)(Project);

my reducer:

import { combineReducers } from "redux";
import * as actions from "../constants/projectConstants";

const activities = (state = "", action) => {
  switch (action.type) {
    case actions.ACTIVITY_TITLE_UPDATE:
      return action.text;
    case actions.ACTIVITY_DESCRIPTION_UPDATE:
      return action.text;
    default:
      return state;
  }
};

const page = (state = 0, action) => {
  switch (action.type) {
    case actions.NEXT_ACTIVITY_PAGE:
      const nextPage =
        action.page < action.totalPages ? action.page + 1 : action.page;
      return nextPage;
    case actions.PREV_ACTIVITY_PAGE:
      const prevPage = action.page > 0 ? action.page - 1 : 0;
      return prevPage;
    default:
      return state;
  }
};

const projectReducer = combineReducers({ activities, page });

export default projectReducer;

my registration:

import ReactOnRails from "react-on-rails";

import ProjectApp from "./ProjectApp";

ReactOnRails.register({
  ProjectApp
});

my store:

import { createStore } from "redux";
import projectReducer from "../reducers/projectReducer";

const configureStore = railsProps => {
  const store = createStore(projectReducer, railsProps);
  return store;
};

export default configureStore;

my controller:

class ActivitiesController < ApplicationController
  include ReactOnRails::Controller

  before_action :set_activity, only: [:show, :edit, :update, :destroy]

  before_action :initialise_shared_store


  # GET /activities
  # GET /activities.json
  def index
    @activities = Activity.all.limit 5
    @project_props = { activities: @activities }
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_activity
      @activity = Activity.find(params[:id])
    end

    def initialise_shared_store
      logger.debug "initialise_shared_store"
      redux_store "projectController",  props: { activities: @activities }
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def activity_params
      params.require(:activity).permit(:title, :description)
    end
  end

my layout:

<!DOCTYPE html>
<html>
<head>
  <title>Project</title>
  <%= csrf_meta_tags %>

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'webpack-bundle' %>
</head>

<body>
  <%= yield %>
  <%= redux_store_hydration_data %>
</body>
</html>

and my view:

<%= redux_store("View",  props: { activities: @activities }) %>
<h1>Project</h1>
<%= react_component("ProjectApp", props: @project_props, prerender: false) %>

Any clues on what I might be doing wrong?

Thanks,
G


#2

You need to call registerStore in your JS code.


#3

Thanks,

That (and other) worked