0
Ich bin ein Reaktion und redux Anfänger. Ich habe eine React App ohne Redux und integriertem React Router v4 erstellt. Alles hat perfekt funktioniert.React Router v4 lädt keine Komponente nach der Integration von Redux
Dann integrierte ich Redux zur App, damit ich den Zustand teilen kann. Danach hat mein Router nicht mehr funktioniert. Also ich dachte, um das zu beheben sollte ich integrierte react-router-redux v5 (ich habe tatsächlich gelernt, dass Sie nicht hinzufügen müssen, react-router-redux Router arbeiten zu machen. Es ist da, redux Zustand über Router Info zu aktualisieren). Noch Router funktionieren nicht.
Wenn ich auf einen Link klicke, der einen Router laden soll, ändern Sie die URL des Browsers auf die richtige Router-URL und ändern Sie den Redux-Router-Status, um den Router zu korrigieren (dies wurde mit react dev tools beobachtet). Wenn ich die Seite aktualisiere, wird die mit dem Router verbundene Komponente geladen.
Datei, die ich redux Speicher konfiguriert
/**
* Created by Shane on 5/12/2017.
*/
import { createStore,combineReducers,applyMiddleware,compose } from 'redux'
import {authenticationReducer} from './../reducers/index'
import { reducer as formReducer } from 'redux-form'
import thunk from 'redux-thunk'
import { routerReducer, routerMiddleware } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory();
let configureStore =() => {
const persistedState = localStorage.getItem('reduxState') ? JSON.parse(localStorage.getItem('reduxState')) : {};
let reducer=combineReducers({
authenticationData:authenticationReducer,
router:routerReducer,
form: formReducer // <---- Mounted at 'form'
});
//creating the store using reducer
let store=createStore(reducer,
persistedState,
compose(applyMiddleware(thunk,routerMiddleware(history)),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));
store.subscribe(() => {
// console.log("Current State",store.getState());
localStorage.setItem('reduxState', JSON.stringify(store.getState()))
});
return store;
};
module.exports ={
history,
configureStore
};
Das ist mein Hauptdatei
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import {Provider} from 'react-redux'
import Base from './base/Base';
import 'mdi/css/materialdesignicons.css'
import './index.css';
import * as storeConfig from './redux/store/store'
import { ConnectedRouter } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
let store=storeConfig.configureStore();
const history = storeConfig.history;
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Base />
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
Basis Datei, wo ich Routen definiert
import React from 'react';
import { Grid } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { Col } from 'react-bootstrap';
import {connect} from 'react-redux'
import Content from '../Content';
import AppNavBar from '../nav_bar/app_nav_bar/AppNavBar';
import './Base.css';
import Login from "../login/Login";
import Profile from "../profile/Profile";
import MyApps from "../my_apps/MyApps";
import NewAppBase from "../new_app/new_app_base/NewAppBase";
import {Route} from "react-router";
class Base extends React.Component {
constructor(props) {
super(props);
// this.state = { isLogged: true } ;
}
render() {
//let {dispatch} =this.props;
let content=(<div></div>);
// dispatch(action.apiLogIn("y2kshane","Abcd1234"));
if(this.props.isLogged)
{
content=(
<Grid className="Parent-container">
<Row>
<Col xs={12} md={12}> <AppNavBar/></Col>
</Row>
<Row >
<Col xs={12} md={12} className="content">
{/*<Content/>*/}
<Route exact path='/profile' component={Profile}/>
<Route exact path='/my-apps' component={MyApps}/>
<Route exact path='/new-app' component={NewAppBase}/>
</Col>
</Row>
</Grid>
);
}else {
content=(<Login/>);
}
return (
<span>{content}</span>
);
}
}
export default connect((state) => {
return {
isLogged:state.authenticationData.isLogged
}
})(Base);
AppNavBar Datei, wo ich die Routen nennen
/**
* Created by admin on 4/27/2017.
*/
import React, { Component } from 'react';
import { Navbar } from 'react-bootstrap';
import { Nav } from 'react-bootstrap';
import { NavItem,NavDropdown,MenuItem } from 'react-bootstrap';
import './AppNavBar.css';
import {connect} from "react-redux";
import * as action from './../../redux/actions/index'
import {push} from "react-router-redux";
class AppNavBar extends Component {
constructor(props) {
super(props);
// this.state = { isLogged: true } ;
// this.navigateTo.bind(this);
}
logout =() => {
console.log("calling logot");
this.props.dispatch(action.logoutAction())
};
navigateTo = (url) =>
{
this.props.dispatch(push(url))
};
render() {
return (
<Navbar className="nav-bar" collapseOnSelect>
<Navbar.Header >
<Navbar.Brand className="nav-bar-text">
<a href="#">Dev Dashboard</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
{/*<LinkContainer to="/profile">*/}
<NavItem eventKey={1} onClick={() => this.navigateTo("/profile")}>Profile</NavItem>
{/*</LinkContainer>*/}
{/*<LinkContainer to="/my-apps">*/}
<NavItem eventKey={2} onClick={() => this.navigateTo("/my-apps")}>My Apps</NavItem>
{/*</LinkContainer>*/}
<NavItem eventKey={2} href="#" className="nav-bar-text">Reports</NavItem>
<NavItem eventKey={2} href="#" className="nav-bar-text">API Browser</NavItem>
<NavItem eventKey={2} href="#" className="nav-bar-text">Knowledge Base</NavItem>
</Nav>
<Nav pullRight>
<NavDropdown eventKey={3} title={this.props.username} id="basic-nav-dropdown">
{/*<NavBarUser/>*/}
<MenuItem eventKey={3.1}>Settings</MenuItem>
{/*<MenuItem eventKey={3.2}>Another action</MenuItem>*/}
{/*<MenuItem eventKey={3.3}>Something else here</MenuItem>*/}
<MenuItem divider />
<MenuItem eventKey={3.3} onClick={this.logout} ><b>Logout</b></MenuItem>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default connect(
(state) => {
return {
username : state.authenticationData.userName
}
}
)(AppNavBar);
Ich habe versucht, dies für wie 2 Tage jetzt zu beheben :(. Bitte hilf mir. Vielen Dank.