0
저는 반응하고 초보자입니다. 내가 redux 않고 통합 반응 반응 라우터 v4 반응 애플 리케이션을 만들었습니다. 모든 것이 완벽하게 작동했습니다.React Router v4가 redux를 통합 한 후에 구성 요소를로드하지 않습니다.
그런 다음 나는 redux를 앱에 통합하여 상태를 공유 할 수 있습니다. 이 후 내 라우터가 작동을 멈췄습니다. 그래서 나는 이것을 통합해야한다고 생각했다. react-router-redux v5 (나는 실제로 당신이 라우터 작동을 위해 반응 라우터 유무를 추가 할 필요가 없다는 것을 배웠다. 라우터 정보에 대한 redux 상태를 업데이트하기 위해있다.) 여전히 라우터가 작동하지 않습니다.
라우터를로드해야하는 링크를 클릭하면 브라우저 url이 올바른 라우터 URL로 변경되고 라우터 상태가 라우터를 수정하도록 변경됩니다 (react dev 도구를 사용하여 관찰 됨). 페이지를 새로 고치면 라우터와 관련된 구성 요소가로드됩니다. 내가 REDUX 저장소
/**
* 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
};
을 구성
파일이 내 기본 파일 내가 루트
에게 내가 경로를 호출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 파일을 정의
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')
);
자료 파일입니다
/**
* 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);
저는 2 일 동안 이것을 바로 잡으려고했습니다. 도와주세요. 감사.