React-Redux-Router

JavaScript
#1

Hi, i’m update my web-app, after add Redux now i want to add Router, so, i see that with Router it’s better not then on App my function i’ll for other page, but now how i can do it?
think i’ve something like this
app.js

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from '../Routes/Home';
import {getShows} from '../actions/action';
import './App.css';
import $ from 'jquery';

import Test from '../Routes/Test';



const mapStateToProps = (state) => {
  return {
    isPedding: state.getShowsHome.isPedding,
    data: state.getShowsHome.data
  }
}


const mapDispatchToProps = (dispatch, ) => {
  return {
    onGetShows: () => dispatch(getShows())
  }
}


class App extends Component {

  constructor() {
    super();
    this.state = {
      isLoad: false,
      headerSlide: []
    }
  }


  componentDidMount() {
    this.props.onGetShows();
    setTimeout(() => {
      this.loadHeader(this.props.data.popularSeries, this.props.data.popularMovies)
    }, 6000)
  }


  loadHeader = (tvSeries, movies) =>{
    let i = 0;
    let pre = [];
    while(i < 5 && this.state.headerSlide.length !== 5) {
        let number = Math.floor(Math.random() * 20 );
        pre.forEach(num => {
          if(number === num){
            number++;
          }
        })
        if(number % 2 === 0 && tvSeries[number].backdrop_path != null && tvSeries[number].poster_path != null){
            let newElement = [...this.state.headerSlide, tvSeries[number]];
            this.setState({headerSlide: newElement})
        } else  if(movies[number].backdrop_path != null && movies[number].poster_path != null){
            let newElement = [...this.state.headerSlide,movies[number]];
            this.setState({headerSlide: newElement})
        }
        pre.push(number);
        i++;
        console.log(pre);
    }
    $(".loader").fadeOut(1000);
    setTimeout(()=> {
      this.setState({isLoad: true})
    },1000)
  }

  render() {
      if(!this.state.isLoad){
        return <h1 className="loader">Loading</h1>
      } else {
        return (
            <Router>
              <Switch>
                <Route exact path="/"  render={(props) => (<Home {...props} element={this.state.headerSlide} tvSeries={this.props.data.popularSeries} movies={this.props.data.popularMovies} horror={this.props.data.horrorMovies} anime={this.props.data.anime}/>)}/>
                <Route path="/test" render={() => (<Test />)} />
              </Switch>
            </Router>
        );
      }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

so on this way when i got /test the browser reload everything, things i don’t no need on that page, he reload the Loading too, so i need to create the store and use provider on the Home.js Router or i’ve to use Provider on App.js, or can i only then Provider on index, and on Home.js pass all the thing function and connect and other redux stuff i i want to use on my home page ?

#2

The Provider component needs to be at the very top of the component tree: if you hook the the router into the redux store then you dispatch information about the browser history to the store. I’d strongly advise keeping the router completely separate to redux though, the react-redux-router binding library has some issues, and it’s much easier to use react-router alongside redux, it doesn’t need to overlap.

#3