Как получить ReactRouter Props, используя Redux

Question

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

// import browserRoute
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'

// redux
import Todo from './todo/Todo';
import Login from './todo/Login';
import Home from './todo/Home';
import Callender from './Callender/Callender'
import WhetherData from  './Callender/CallenderComponent' 
import { localstoreExport } from './index';




export default class App extends Component {
  render() {
    return (
      <BrowserRouter>
        < Switch>
        <Route path="/todo">
          <Todo />
          </Route>

         <Route path="/login">
              <Login /> 
              </Route>
            <Route path ="/callender"> 
            <Callender />
            </Route>
            <Route path="/climateshow" component ={WhetherData}/>
            <Route exact path="/" component={Home}/>
        </Switch>
      </BrowserRouter>
      </Provider>
    )
  }
}

Index.js

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


// Redux
import { createStore,combineReducers,applyMiddleware,compose } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';



// import reducer
import todoReducer from './store/reducers/rootReducer';
import  whetherReducer from './store/reducers/callender'


// combine the Reducer 
const rootReducer = combineReducers({
  todoReducer,
  whetherReducer
})


//  chrome extension helper 
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
//  create a store


const store = createStore(rootReducer,  composeEnhancers(applyMiddleware(thunk)));

export  const localstoreExport = store; 

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

Callender.js

import React, { Component } from 'react';

import { DatePicker, DatePickerInput } from 'rc-datepicker';
import 'rc-datepicker/lib/style.css';
import  axios  from  'axios'
import { connect } from 'react-redux';



// redux components
import { getDataFromApi } from '../store/actions/callender'



class Callender extends Component {
    state = {
        totalDate:''
    }


    //  These is the complete code for getting the response from version 2 of api 
    onChange = (event) =>{
        console.log(event);
        this.setState({
            totalDate:event
        })
        this.props.getWhetherData()
        {console.log(this.props.whetherData)}


    }



    render() {
        const date = '2015-06-26';
        return (
            <div>
           <DatePicker onChange={this.onChange} value={date} />
            {this.props.whetherData? console.log(this.props.history): null} 
            </div>
        )
    }
}


const mapStateToProps = state =>{
    return {
        whetherData: state.whetherReducer.whetherData
    }


}

const mapDispatchToProps = dispatch =>{
    return {
     getWhetherData : () => dispatch(getDataFromApi())  
    }


}

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

1) В следующем коде я написал свои маршруты, в файле App.js и созданном хранилище в Index.js

2) В Callender.js я хочу указать свой маршрут до конечной точки данных, поэтому я пытаюсь увидеть this.props.history, который показывает неопределенный

3) поэтому я попытался просмотреть свои реквизиты по this.props Теперь он показывает мне реквизиты-редукторы, поэтому я понял, что реквизиты моего маршрутизатора переопределяются реквизитами-редукторами

4) какиспользовать push истории при использовании redux

Answer 1

Вы можете обернуть свой компонент с помощью withRouter .

import { withRouter } from "react-router";
export default connect(mapStateToProps,mapDispatchToProps)(withRouter(Callender));

Вы можете найти подробный пример здесь .