How can this.props be used in the Root component?

Question

React

there is such an application

import React, {Component} from 'react';
import {Provider} from 'react-redux';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import {compose, createStore} from "redux";
import rootReducer from "../reducers";
import ReactDOM from "react-dom";
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

const store = createStore(rootReducer);

class Auth extends Component {

  constructor(props) {

    super(props);

  }

  render() {
    return (
      <Provider store={store}>
          <BrowserRouter>
            <Switch>
              <Route exact path="/signin" >
test
              </Route>
            </Switch>
          </BrowserRouter>
      </Provider>

    )
  }
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({}, dispatch)
}


export default connect(state => ({

  api: state.api,

}), matchDispatchToProps)(Auth);

urls are stored in state.api , for example now
Route looks like this:

<Route exact path="/signin" >
test							
</Route>

i would like to use it like this

<Route exact path={this.props.api.signin} >
test						
</Route>

is it possible to solve the problem in such a way as to put all the strings that are used in the URL in 1 reducer ?

Answer 1

The Provider passes the store data to the context.
connect uses this data, so this HOC can only be used in child Provider components .
You need to reorganize the structure a bit:

import { render } from 'react-dom';
import {createStore} from "redux";
import rootReducer from "../reducers";
import Auth from './components/Auth';

const store = createStore(rootReducer);

render(
  <Provider store={store}>
    <BrowserRouter>
      <Auth />
    </BrowserRouter>
  </Provider>, 
  document.getElementById('root'),
);

import React, {Component} from 'react';
import {connect} from 'react-redux';

class Auth extends Component {
  render() {
    return (
      <Switch>
        <Route exact path={this.props.api.signin} render={() => Test}/>
      </Switch>
    );
  }
}


const mapStateToProps = state => ({
  api: state.api,
});

export default connect(mapStateToProps)(Auth);