connected-react-router-6-fix

[vipinlahoti]

connected-react-router-v6 with react-redux-6

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[notrab]

Hi @vipinlahoti

Thanks for the PR. I'll take some time to review this, update the written tutorial surrounding this boilerplate and merge.

Could yo resolve the conflicting package.json?

Thanks for your PR 😄

[vipinlahoti]

Hi @notrab conflicts are resolved.
Ty

[vipinlahoti]

@notrab this boilerplate is really of smaller size and the only available, I think you must expand this app connecting with backend or some kind of storage to make it full stack boilerplate with CRUD operations.

[dcsan]

@vipinlahoti did you take any further steps to connect it with Axios? I am using this bolierplate as a basis to learn me some redux and going through tutorials right now to start connecting it to a backend...

[vercel]

Deployment failed with the following error:

If you agree with that, please run again with `--public`.

[vercel]

Deployment failed with the following error:

If you agree with that, please run again with `--public`.

[vipinlahoti]

@dcsan not getting much time on this, but taking sometime to enhance and will connect it with Axios.
As of now this branch have react-helmet, react-intl, restructured into component container architecture.

[vercel]

Deployment failed with the following error:

If you agree with that, please run again with `--public`.

[vipinlahoti]

@dcsan Hi, Added an Axios support with a dummy get request, will extend this to make a complete CRUD operations, @notrab need your help to pass the now check.

[dcsan]

hi! I get an error trying to start this up:

npm start gives:

Failed to compile
./src/index.js
Cannot find file: 'index.js' does not match the corresponding name on disk: './src/containers/App/app'.
This error occurred during the build time and cannot be dismissed.

checking the package.json we have:

"start": "react-scripts start",

so, magic all the way down 🔍

npm run build and then serve -s build will work.

also wondering about your directory structure, aren't reducers usually kept together etc? although your example now is quite simple keeping all the Todo related stuff together in one directory.

[dcsan]

OK i think the problem is because folders and files are inconsistent in upper/lower case. maybe you're running on a different file system. for me on a mac - which is usually NOT case sensitive it was throwing these errors, maybe some magic inside react-scripts.

the diff below gets things to run, but a better fix would be to rename all folders consistently upper or lower. eg I noticed your Todo only is capitalized.

just changing the case of things is always a problem on the mac with git since the filesystem itself isn't case sensitive...

Todo
about
app
home

➜  crapr git:(connected-react-router) ✗ git diff
diff --git a/src/containers/app/index.js b/src/containers/app/index.js
index c100436..85faa2b 100644
--- a/src/containers/app/index.js
+++ b/src/containers/app/index.js
@@ -7,8 +7,8 @@ import { Helmet } from 'react-helmet';
 import { Switch, Route } from 'react-router-dom';

 import Header from 'components/Header';
-import Home from 'containers/Home';
-import About from 'containers/About';
+import Home from 'containers/home';
+import About from 'containers/about';
 import Todo from 'containers/Todo';

 const App = () => (
diff --git a/src/index.js b/src/index.js
index f0af05b..03c3017 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,7 +6,7 @@ import { IntlProvider } from 'react-intl';

 import * as serviceWorker from 'utils/serviceWorker';
 import history from 'utils/history';
-import App from 'containers/App';
+import App from 'containers/app';

 import store from './store';
 import messages from './i18n-en-us.json';
diff --git a/src/reducer.js b/src/reducer.js
index 9060c30..cec1f4c 100644
--- a/src/reducer.js
+++ b/src/reducer.js
@@ -6,7 +6,7 @@ import { combineReducers } from 'redux';
 import { connectRouter } from 'connected-react-router';

 import history from 'utils/history';
-import countReducer from 'containers/Home/reducer';
+import countReducer from 'containers/home/reducer';
 import todoReducer from 'containers/Todo/reducer';

 export default combineReducers({

[notrab]

also wondering about your directory structure, aren't reducers usually kept together etc? although your example now is quite simple keeping all the Todo related stuff together in one directory.

This boilerplate was created for the tutorial I wrote over on Medium which follows the "ducks" approach.

I'll have to update the Medium tutorial to reflect any changes to the above router changes.

[justanotherkevin]

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { Router, Route, browserHistory } from 'react-router'
import store, { history } from './store'
import App from './App'

import './index.css'

const target = document.querySelector('#root')

render(
  <Provider store={store}>
    <Router history={history}>
      <div>
        <App />
      </div>
    </Router>
  </Provider>,
  target
)

change the import { ConnectedRouter } from 'connected-react-router' to import { Router, Route, browserHistory } from 'react-router' and well replace ConnectedRouter with Router

[cristian-sima]

Any idea when this will be solved?

[cwagner22]

Any update on this?