Каким образом можно использовать this.props в Root компоненте?

Question

[Vanya Huk]

есть такое приложение

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);

в state.api храняться урлы, например сейчас

Route выгледит так:

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

а хотелось бы использовать вот так

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

возможно ли так решить проблему, чтобы вынести все строки, которые используються в URL в 1 редюсер ?

Answer 1

[Антон Спирин]

Provider передает данные store в контекст.
connect использует эти данные, поэтому использовать этот HOC можно только в компонентах дочерних Provider.
Вам надо немного реорганизовать структуру:

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);