wellyshen / react-cool-starter Goto Github PK

Hi!

I just tried to start the react-cool-starter project, but I have some troubles.

I get the following message: webpack-isomorphic-tools (waiting for the first webpack build to finish) when I'm running npm start. So I runned npm run build to fix it. Then I've got this error: ERROR in Entry module not found: Error: Can't resolve 'babel' in '/PATH/react-cool-starter'.

Do you have any ideas?

Thanks for your time.

It doesn't do SSR for me. I have changed DISABLE_SSR global variable to false, but when I turn off JavaScript or open source code it doesn't show expected content.

First off, thanks for creating a clean and well-documented starter app. We are in the process of migrating our existing code to use the tools provided here.

We are running into an issue with React Router v4 when trying to navigate to another route programmatically via push. At first we tried history.push(...), but that gave us errors saying push was undefined.

After looking through the issues, we found a thread that's relevant: #36. I think the issue was made before the full React Router v4 implementation was made to the boilerplate, but we went ahead with attempting the solution anyway. We added this to a connected component:

import { push } from 'react-router-redux'
...
const mapDispatchToProps = (dispatch) => {
  return {
    push: v => dispatch(push(v)),
    ...
  }
};

And tried changing routes via

this.props.push('/newroute')

Although the browser's URL bar changes location, but the page does not update. Can anyone tell me what's missing here?

Steps to reproduce:

1. Replace ./src/containers/Home/index.js with the following:

/* eslint-disable react/sort-comp */
/* @flow */

import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import type { Connector } from 'react-redux';
import Helmet from 'react-helmet';
import { push } from 'react-router-redux';

import * as action from './action';
import type { Home as HomeType, Dispatch, Reducer } from '../../types';
import UserList from '../../components/UserList';
import styles from './styles.scss';

type Props = {
  home: HomeType,
  fetchUsersIfNeeded: () => void,
  push: () => void,
};

// Export this for unit testing more easily
export class Home extends PureComponent {
  props: Props;

  static defaultProps: {
    home: {
      readyStatus: 'USERS_INVALID',
      list: null,
    },
    fetchUsersIfNeeded: () => {},
  };

  componentDidMount() {
    this.props.fetchUsersIfNeeded();
  }

  renderUserList = () => {
    const { home } = this.props;

    if (!home.readyStatus || home.readyStatus === action.USERS_INVALID ||
      home.readyStatus === action.USERS_REQUESTING) {
      return <p>Loading...</p>;
    }

    if (home.readyStatus === action.USERS_FAILURE) {
      return <p>Oops, Failed to load list!</p>;
    }

    return <UserList list={home.list} />;
  }

  render() {
    return (
      <div className={styles.Home}>
        <Helmet title="Home" />
        {this.renderUserList()}
        <button onClick={() => this.props.push('/UserInfo/6')}>Click this button</button>
      </div>
    );
  }
}

const connector: Connector<{}, Props> = connect(
  ({ home }: Reducer) => ({ home }),
  (dispatch: Dispatch) => ({
    fetchUsersIfNeeded: () => dispatch(action.fetchUsersIfNeeded()),
    push: a => dispatch(push(a)),
  }),
);

export default connector(Home);

2. Run the project and click the "Click this button"
3. URL will change but the component won't update

Hi,

Thank for your work, i have one problem's if it's one i'm not sure.

When i create new components, i create js and scss file hot reload relaunch the browser and he don't find the scss file.

I need to relaunch build cmd.

Thank you for help.

Im getting 2 warnings when running the app.

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) <div class="styles__App-2nmMK" d
(server) <div class="_2nmMK" data-reactro

I have a problem with nodemon. I think it's very important to use only webpack for rebuilding components and style for them. I decided to turn off stylelinter and take control of writing my styles by myself. Hovewer, when I wrote code like that :
@import '../../theme/variables' body { background-color: $color-dark-gray; font-family: 'Helvetica-Light', Helvetica, Arial, sans-serif; }, where it lacks semicolons after import of file, I got follow message in terminal:
[nodemon] app crashed - waiting for file changes before starting....
The only way to repair it - to execute "rs" for reload server but it's too long.
I suspect that it happens because of WebpackIsomorphicTools, maybe it'll be better to use a classic webpack way as mentioned here? Or don't use it in development mode.
Thanks.

Is there a way to apply the App container's styles last, so as to give precedence to the nested components' styles? Currently this is not possible with the structure we have.

Steps to reproduce:

1. In ./tools/webpack/config.js set CSSModules = false
2. Add the following to ./src/containers/App/styles.scss

.test {
  color: red;
}

3. Add the following to ./src/containers/Home/styles.scss

.test {
  color: blue;
}

4. Add the following to ./src/containers/Home/index.js's render function

render() {
  ...
  <span className="test">This should be blue, but it's red.</span>
  ...
}

Sometime I have an error.

==> 😭 Rendering routes error: TypeError: Converting circular structure to JSON
GET / 404 1294.641 ms - 12

I don't know any relations and how to reproduce that error. Sometime I can start app and app works well and after I can restart server and have the error. Very strange. Because I didn't change any code. Run clear:all command doesn't help. But after reboot a server the app can works corrects.

I want to redirect all not found routes to the home link './'

What changes do I make in the routes.js file?

Let's make some sharing between us 👻

I am wanting to integrate some of the code that you have created here into my own stack to achieve a better development experience but I am running into a snag.

Your application assumes one entry, while mine has several. The reason for this is that we have different applications for different types of users (admin vs. customer etc.).

I know how to set up multiple entries with Javascript and that has gone well, but I can't figure out how to handle the SCSS files? In renderHtmlPage, it seems you loop over all compiled style assets and inject them in. In my use case, we wouldn't want the styles of other apps bleeding into eachother.

My webpack setup before was able to determine what CSS we brought in based on the entry but it seems that is not the case anymore. WIT is compiling all of them. So if I could get some advice or help on how to set up multiple 'views' or entries and have the style assets be dynamic based on the entry, that would be greatly appreciated!

P.S. I love the starter-kit!

Interesting new isomorphic-webpack package here. Haven't had a chance to look at it yet — and not sure if it would be of any help with this boilerplate — but it claims to solve some of the pain points with webpack-isomorphic-tools.

I was trying to access the store that is passed down to html.js from the server.js. First I tried the same approach wih the Connector and passing down the reducer in the connect. But the value for my reducer is always undefined. Is the dispatch part required ? from what I understand I can send connect like this:

const mapStateToProps = ({ tracker }: Reducer) => ({ tracker });

const connector: Connector<{}, Props> = connect(mapStateToProps);

export default connector(FlowHome);

Reducer

/* @flow */

import _ from 'lodash';

import {
  TRACKER_NEXT_STEP,
} from './action';
import type { Tracker, Action } from '../../types';

type State = Tracker;

const initialState = {
  currentStep: '0',
  completedSteps: [],
};

export default (state: State = initialState, action: Action): State => {
  switch (action.type) {
    case TRACKER_NEXT_STEP:
      return _.assign({}, state, { currentStep: action.currentStep });
    default:
      return state;
  }
};

Type

export type Tracker = {
  currentStep: string,
  completedSteps: Array<string>,
}

export type Reducer = {
  tracker: Tracker,
  router: any,
};

export type Action = { type: 'TRACKER_NEXT_STEP', currentStep: string };

Any suggestion on what is the correct way to get the state this way. This reducer specifically is really simple and does not have any calls to the server. And the state holds a string.

Thanks

Hi,

Sorry for the beginner question, does this setup support code splitting out of the box (i.e. different JS bundle per page)? If not, how can I go about doing that?

This is a terrific package by the way. I've been looking around and this is by far the most updated and cleanest setup. Can't wait to dig further into it.

Cheers

Do all containers have to have a fetchData method? In server.js, it looks like you are expecting every container to have a fetchData method if it wants access to "dispatch". What do I do for containers that don't need to fetch data but still need access to store.dispatch?

How do I dispatch push on click or other actions through the router?

Next versions of phantomjs are going to be under phantomjs-prebuilt name.

If running in dev mode (npm start), and you save a scss file that doesn't meet the lint requirements, an unhandled promise stops to autobuilding and it can only be restarted again by restarting dev mode (CTRL+C and npm start).

Below is an example of the error:

webpack built 2c46991acd218b194d93 in 9297ms

src/components/UserList/styles.scss
 5:3  ✖  Unexpected empty line before nested rule   rule-nested-empty-line-before


(node:30980) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Failed because of a stylelint error.

I am really confusing how to build server side node code for production，you are using webpack and bundle it all with a single server.js file which contains some react component code...

if it's true not to bundle server code... if we should just use babel to compile our node code and compoinent code to es5 for production？

I already have an api server and so would adapt your awesome project to it as a front end,
I'll just: yarn build:client

Q: Could you please create an index.html file?

Thanks mate from Sydney

What are your thoughts on moving testing to Jest? Dan Abramov — the author of Redux — has been working on the framework recently and they've pushed a number of big updates over the past few months (snapshot testing, performance improvements, integrated coverage reporting, upgraded CLI, etc).

This should happen, right?

I am sorry for this, actually there is no error with your boilerplate. Let me explain.
I have cloned your boilerplate to use for my Recipebook(the app i am building in educational purposes in order to get solid understanding of redux ecosystem).
So i have changed boilerplate to fit my needs.
After that i run npm run build successfully.
And then i get error(screenshot below) on 'npm start'.
I have created Recipebook repo where i have uploaded my code.
I know i asking for too much but i am eated my braines trying to figure this out.
Can you please check my repo and help me figure out how to fix this error.
Thanks in advance!

After successfull yarn install and yarn build, command node ./build/server.js return error:

C:\Users\n.balabaev\Source\Repos\react-cool-starter>node ./build/server.js
C:\Users\n.balabaev\Source\Repos\react-cool-starter\build\server.js:468
if (__DEV__) {
    ^

ReferenceError: __DEV__ is not defined
    at Object.<anonymous> (C:\Users\n.balabaev\Source\Repos\react-cool-starter\build\server.js:468:5)
    at __webpack_require__ (C:\Users\n.balabaev\Source\Repos\react-cool-starter\build\server.js:21:30)
    at Object.<anonymous> (C:\Users\n.balabaev\Source\Repos\react-cool-starter\build\server.js:1761:18)
    at __webpack_require__ (C:\Users\n.balabaev\Source\Repos\react-cool-starter\build\server.js:21:30)
    at C:\Users\n.balabaev\Source\Repos\react-cool-starter\build\server.js:67:18
    at Object.<anonymous> (C:\Users\n.balabaev\Source\Repos\react-cool-starter\build\server.js:70:10)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)

i clone your repo，run npm install then run npm run start
webpack-isomorphic-tools shows (waiting for the first Webpack build to finish) infinitely
its because there is never a webpack-assets.json file on the root folder

so how to run in develop mode？

I'm trying to make fontawesome work for my css modules configuration, but I'm getting some errors:

Failed to decode downloaded font: http://localhost:3000/
(index):1 OTS parsing error: invalid version tag

It appears the client is trying to fetch the font from the root url of the app, which is incorrect.

Heads up, latest version of better-npm-run is having issues.

See benoror/better-npm-run#56

It does not reliably set the environment variable to development.

I run npm install and npm run start:production
http://pastebin.com/LjzRFhuK
what am I doing wrong?

Does anyone have a sample of adding a nav bar to this starter using react-bootstrap?

I"ve crated a component at src/compontents/NavBar/index.js

import React from 'react';
import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';


const NavBar = (
  <Navbar inverse collapseOnSelect>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="https://github.com/kecorbin/react-collins-ui">React-Bootstrap</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="/jobs">Jobs</NavItem>
        <NavItem eventKey={2} href="/">Users</NavItem>
        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
          <MenuItem eventKey={3.1}>Action</MenuItem>
          <MenuItem eventKey={3.2}>Another action</MenuItem>
          <MenuItem eventKey={3.3}>Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.3}>Separated link</MenuItem>
        </NavDropdown>
      </Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link Right</NavItem>
        <NavItem eventKey={2} href="#">Link Right</NavItem>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
);

export default NavBar;

This code is based upon the samples at https://react-bootstrap.github.io/components.html#navbars

What I cannot figure out is where I should place the line
ReactDOM.render(navbarInstance, mountNode);

I've tried a few different places, but usually end up with the following error message:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
    in Unknown
    in Router (created by StaticRouter)
    in StaticRouter
    in Provider
==> 😭  Rendering routes error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `StatelessComponent`.

Also how I would reference the mountNode, assuming that I'm trying to load this navbar up into the App container. My code is located at https://github.com/kecorbin/react-collins-ui if anyone could help a n00b. I apologize if this doesn't make sense, I'm very new to React, but love what I'm seeing from this starter!!!

Hey @wellyshen
First of all thanks for coming up with a great repository that works flawlessly.

I have been able to run in dev mode as well as build it on the localhost environment but the problem creeps in once I deploy it on Heroku. I am following the standard process as found in react-redux-universal

1. Remove the "PORT": 8080 line from the betterScripts / start-prod section of package.json.
2. heroku config:set NODE_ENV=production
3. heroku config:set NODE_PATH=./src
4. heroku config:set NPM_CONFIG_PRODUCTION=false

Also on pushing it on heroku master, the build log says "build succeeded" but on opening the link, it shows application error. Could you please tell what else needs to be done to make it work?

Url-loader requires file-loader :)

App does not work properly in IE 11. I suggest adding babel-polyfill. Something like below should fix the problem:

1. npm install --save babel-polyfill
2. Add 'babel-polyfill' in vendor array.

In reference to #10 , there's a basic solution offered here (towards the bottom) that might help.

Hi,

First of all thanks for a great starter. I was having some problems trying to add bootstrap to the starter. I tried several ways .

1. Require the bootstrap.css at Html.js
2. Import the style , in general styles import section at App/index.js
3. Tried adding react-bootstrap(Compos work , but still import still fails )

The above methods always throw me an error with the fonts loader: woff -woff2-eot-svg etc. It saids it can not find the "file-loader". Given this I tried playing with the loaders order but still didnt work.

Any idea to get this working, thanks

I work for a large factory where I develop and maintain software that does measurements, analysis and produces reports about the process. Because it is used at different places I once decided to make a web application and use php/js/jquery as tools. It is running good but because of the size hard to maintain so I have started to look for a better solution.
I investigated Agular but didn't like it because of Google (the factory is in China and a lot of Google services are blocked), so I looked for another solution and thought Meteor with React might be a good start until I read about the deployment issues - it seems Meteor only wants to have it installed on their own servers..
React/Nodejs is in the end the way I want to give a try and hot loading would be nice to improve the development speed. So I stumbled upon react-cool-starter because I don't want to reinvent the wheel.

I started to install it but received the following message:

aevl@aevl-Lenovo:/react/react-cool-starter$ npm install
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of eslint-plugin-import@^1.16.0 but none was installed.
npm WARN [email protected] requires a peer of eslint-plugin-import@^1.16.0 but none was installed.
aevl@aevl-Lenovo:/react/react-cool-starter$

I could start the server without problems but I am not sure what to think about the warning, can you explain?

The os I run it on is Lubuntu 16.04.1 (Xenial)

First of all I want to thank you for this awesome boilerplate.
I run server with store which contains initial state from my reducers.
But when I change initial state in one of my reducers, it doesn't update.
I was trying to achieve reloading with nodeman. It watched folder with reducers and reload when they change, but nodemon reload server too slow.
There are some solutions for it such as piping, chokidar and so on.
It needs Browsersync also.
It would be great if you added it in this boilerplate.
Thanks.

Hi, I have some problem with styles and hot reloading.

I use branch server_bundle

1. Styles

When I load my page, styles are put in tag <style>
screen
But in 3-5 seconds some links put in as well.
screen
What styles are it?

2. Hot reload

It appears new script on every hot reload.
screen
May you explain me how it works and can it impact on performance?

3. Bug CSS MODULES

I Have very strange bug with using css modules in production mode - the page without styles loads at first and then page with styles. There is blick between them.
Check it out, just run npm run production in server_bundle branch.
It happens only with CSS Modules mode.

I'll be really gratefull for any help. Thanks.

Hi, could you explane me, what the profit of using async reducers and async routes is?
When I run your app it's load data in first time, despite on the data have already been in app(isomorphic routing with "preload" data), then when I click one of links I see "...loading" again, when come back Home Page I see "...loading" again .
I thought It's too many useless requests to the API. Maybe I am wrong?
If you have time, write me an answer.
Also, I found small bug with stylelinter, when I make mistake in my scss file It shows message, but after repairing webpack doesn't hot reload. It is terminated via failOnErrors: false, but then webpack'll be compile css even with errors.
Thanks

Firstly I would like to say thanks, I tried many boiler plates to find a good SSR react template and this is by far the best and I now have a fully working website.

I have hit issues trying to deploy to AWS, I have added a local variable for NODE_ENV = production and changed the EB start command to 'node ./index.js' then built the project and deployed to EB.

It fails with unable to find webpack-isomorphic-tools which is required in index.js but is in dev-dependencies in the package.json? I tried moving to dependencies but then just get 'waiting for the first webpack build to finish' continuously and a 502 error from the page?

Any idea what I am doing wrong, do I need to move any other packages up to dependencies for this to run in AWS, the 'yarn start:production' works fine on my local machine, but there I obviously have all of the packages anyway?

Again, thanks for a great boiler plate

Horizontal

Vertical

Hi @wellyshen. Could you add browsersync for able to testing app in dev mode on mobile devices?

Hi! Thanks for the awesome starter.

When the server render the HTML server side, i didn't have the state:

const routerContext = {};
let htmlContent = renderToString(
	<Provider store={store}>
		<StaticRouter location={req.url} context={routerContext}>
			<App />
		</StaticRouter>
	</Provider>,
);

and i return the HTML with the initial state of all the containers. When the client try to render in the same div to reuse the generated HTML, React warn me that the generated HTML is different (i render with window.__INITIAL_STATE__).

Should i do render after loaded the data from the component load? If I do it, i do multiple render, because the first is needed for redirect:

// Check if the render result contains a redirect, if so we need to set
// the specific status and redirect header and end the response
if (routerContext.url) {
	ctx.status = 301;
	ctx.redirect(routerContext.url);
	ctx.body = '';
	return;
}

so i need to do it before the data is loaded.

Thanks in advance

I am trying to get a better grip on the package and tried to build it to see how the resulting code was.
The docs told me that after a 'npm build' the result should be in the public/dist folder. This folder contains several files but what I am missing is for instance a simple index.html (or htm/php) file. So how to I put it on the server?

Next I cleaned the dist folder and tried to build it again with npm install.
Now I ran into more serious problems, below is the content of npm-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'run',
1 verbose cli 'start:production' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart:production',
4 verbose run-script 'start:production',
4 verbose run-script 'poststart:production' ]
5 info lifecycle [email protected]prestart:production: [email protected]
6 silly lifecycle [email protected]prestart:production: no script for prestart:production, continuing
7 info lifecycle [email protected]start:production: [email protected]
8 verbose lifecycle [email protected]start:production: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]start:production: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/aevl/react/react-cool-starter/node_modules/.bin:/usr/local/bin:/home/aevl/bin:/home/aevl/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games
10 verbose lifecycle [email protected]start:production: CWD: /home/aevl/react/react-cool-starter
11 silly lifecycle [email protected]start:production: Args: [ '-c', 'npm run build && npm run start:prod' ]
12 silly lifecycle [email protected]start:production: Returned: code: 1 signal: null
13 info lifecycle [email protected]~start:production: Failed to exec start:production script
14 verbose stack Error: [email protected] start:production: npm run build && npm run start:prod
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:245:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:852:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid [email protected]
16 verbose cwd /home/aevl/react/react-cool-starter
17 error Linux 4.4.0-43-generic
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start:production"
19 error node v6.2.1
20 error npm v3.9.3
21 error code ELIFECYCLE
22 error [email protected] start:production: npm run build && npm run start:prod
22 error Exit status 1
23 error Failed at the [email protected] start:production script 'npm run build && npm run start:prod'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the react-cool-starter package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error npm run build && npm run start:prod
23 error You can get information on how to open an issue for this project with:
23 error npm bugs react-cool-starter
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls react-cool-starter
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Hey,
I saw the part in readme where it explains how to use css with the boilerplate.

Somehow in my case it is not importing the css modules.

What I am doing is, let's say we have a div which needs to be given some styling
In App,js
<div className="left-half"> <h1 className="o-header__title titledesk">Something</h1> </div>

and in normalize.css

.left-half{ color: red; width: 100%; height: 800px; background-color: #2bb1de; }

Should it be written in some other way?

Hi @wellyshen:)
Do you have a plan to add react router v4 to your boilerplate?
It's really great solution for routing, but it has some disadvantages like unclear way for server side routing and async routes and reducers as well.
Thanks

First of all,
thankyou @wellyshen for the great boilerplate.

I have the following structure from a checkout of the boilerplate 5 days ago.

        /Tags/
             /index.js //component
             /reducer.js // the reducer for that component
             /actions.js // all the actions that can be performed by that component
       /Products/
             /index.js
             /reducer.js 
             /actions.js 

I'm trying to have a component connect to two reducers.

I use redux's connect and mapStateToProps in this way:

const mapStateToProps = state => (
    { products: state.get('products').products, tags: state.get('tags').tags }
  );
  
  export default connect(mapStateToProps)(Products);

Now, I'd like to dispatch from the very same component two actions.
One action is from the actions in the same component folder, and the other is from the folder in tags.
The name of the actions are unique.
The actions are executed correctly and both try to update their own reducers with dispatch().
The reducer of tags doesn't receive his own dispatch (it doesn't see it), while the reducer of Products, receives both.

I believe i'm doing a bit (lot) of confusion with the function dispatch that seams to be the same and coming from the component itself.
Actions that are dispatched from the Tags component are processed correctly by its reducer.

Any suggestion?

Thank you for your work. Do you have plans to get the server code transpiled for production? Right now it uses babel register instead of being run through Webpack or Babel

Looks like the author has deprecated webpack-universal tools and replaced it with universal-webpack. With this project, "yarn add fails with Couldn't find package "webpack-universal-tools" on the "npm" registry. any time you try to add a new package.

how to match router on server side using react-router v4 #SSR

Hey, It seems functions are getting called on their own "server-side" and keeps calling them forever:

For example I am using an onClick on a button to call a function login():

login = () => {
    console.log('should login');
  }

<button className="btn btn-primary" onClick={this.login()}>Sign in with google</button>

This console.log calls forever and goes into an infinite loop.
Please suggest what to do and I want to make certain functions purely client-side like login and registration etc.

Also wanted a little clarification on mapDispatchToProps if it is written in the standard way?