CODEWITHSUNDEEP
reactjsreact-redux
Mohammed Ajmal
Mohammed Ajmal

Reputation: 590

React js app doesn't render anything after setting up redux

I created a react app with create-react-app and it was rendering the default page. I modified app.js to my needs and set up redux. After that when I run npm start command, it renders only an empty page and no error message in console.

App.js

import React, { Component } from "react";
import "./App.css";
import { Router, Route, Redirect } from "react-router";
import { Provider } from "react-redux";
import {store} from "./store/index";
import Home from "./components/common/Home";
import {history} from './store/index'



class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router history={history} >
         <Route path='/home' Component={Home}></Route>
       </Router>
      </Provider>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {store} from "./store/index";
import * as serviceWorker from './serviceWorker';
import './css/index'
import { Router, Route, Redirect } from "react-router";

ReactDOM.render(

<App store={store}/>


, document.getElementById('root'));


serviceWorker.unregister();

store.js

import { createStore,applyMiddleware } from "redux";
import rootReducer from "../reducers/index";
import createHistory from 'history/createBrowserHistory';
import thunk from 'redux-thunk';
import {createLogger} from 'redux-logger';



const getMiddleware =()=>{
 return applyMiddleware(thunk,createLogger())
}
export const history = createHistory();


export const store= createStore(rootReducer,getMiddleware());

reducer:

const initialState = {
    articles: []
};

function rootReducer(state = initialState, action) {
  return state;
};
export default rootReducer;

I couldn't identify where I am going wrong.Any help would be appreciated.

Upvotes: 1

Views: 714

Answers (2)

Daniel
Daniel

Reputation: 15413

Try setting up your App.js component in the following manner:

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";

import Home from "./components/common/Home";

Notice I did not use react-router, I used react-router-dom, that's what you should be using. react-router is the main or core library that powers react-router-dom and react-router-dom-native. use react-router-dom.

Notice I have no store, no Provider setup, we are going to leave that for your root index.js file. Now the rest of your App component would look like this:

const App = () => {
  render() {
    return (
      <div className="ui container">
       <BrowserRouter>
         <div>
          <Route path="/" exact component={Home} />
         </div>
       </BrowserRouter>
    );
  }
}

export default App;

Now on to your root index.js file:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";

import App from "./components/App";
import reducers from "./reducers";

const store = createStore(reducers);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector("#root")
);

That's where you place your Provider and store. I just eliminated the need for the store.js file, not necessary.

Now inside your first reducer, since you need some type of reducer for your app to boot up and not crash you can just write one like so inside of reducers/index.js:

import { combineReducers } from "redux";

export default combineReducers({
  replaceMe: () => "howdy"
});

You now have a fully running error-less React-Redux application, you can move forward with your project.

Upvotes: 1

azium
azium

Reputation: 20614

Unless you have a really good reason for creating your own history object, use the BrowserRouter or HashRouter objects that are exported from react-router-dom

And as a matter of putting things in the right places.. import the store where you actually set it as a provider instead of importing it twice.

// app.js

import React, { Component } from "react";
import "./App.css";
import { BrowserRouter, Route, Redirect } from "react-router-dom";
import { Provider } from "react-redux";
import { store } from "./store/index";
import Home from "./components/common/Home";

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <Route path='/home' Component={Home}></Route>
        </BrowserRouter>
      </Provider>

    );
  }
}

export default App;

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './css/index'

ReactDOM.render(
  <App />
, document.getElementById('root'));

Upvotes: 0

Related Questions