我正在从头开始开发Reactjs Web应用程序,遇到棘手的情况需要帮助。每当我离开某个特定网址并向后浏览时,我的redux存储似乎都没有连接。
routes.js
const RouteList = () => ( <main> <Switch> <Route path="/abc/" exact component={withRouter(HomePage)} /> <Route path="/abc/xyz" exact component={withRouter(XYZPage)} /> <Redirect from="/" to="/abc/" /> <Route component={Error} /> </Switch> </main> ); export default RouteList;
App.js
class App extends React.Component { constructor(props) { super(props); this.state = {}; } render () { return ( <Router history={browserHistory}> <div> <Header /> <RouteList /> <Footer /> </div> </Router> ); } } export default App;
Header.js
const Header = () => { return ( <Navbar expand="md"> <NavbarBrand tag={NavLink} to="/"> <img src={brandImage} style={{marginRight: "0", width: "40px", height: "40px"}} /><strong style={{color: "#457B9D"}} >Datum</strong> </NavbarBrand> <Nav className="mr-auto" navbar> <NavItem> <NavLink className="nav-link" to={"/abc/xyz"} >XYZ</NavLink> </NavItem> </Nav> </Navbar> ); }; export default withRouter(Header);
当我点击NavLink时,它将把我带到URL:/“ abc / xyz”,它将把我带到XYZPage.js
XYZPage.js
class XYZPage extends React.Component { constructor(props, context) { super(props, context); this.state = { activeTab: "1" }; this.toggle = this.toggle.bind(this); } toggle(tab) { if (this.state.activeTab !== tab) { this.setState({ activeTab: tab }); } } render () { return ( <main> <div className="container-fluid pt-3"> <Nav tabs> <NavItem> <NavLink className={classnames({active: this.state.activeTab === "1"})} onClick={() => {this.toggle("1"); }} > AAA </NavLink> </NavItem> <NavItem> <NavLink className={classnames({active: this.state.activeTab === "2"})} onClick={() => {this.toggle("2"); }} > BBB </NavLink> </NavItem> <NavItem> <NavLink className={classnames({active: this.state.activeTab === "3"})} onClick={() => {this.toggle("3"); }} > CCC </NavLink> </NavItem> </Nav> <TabContent activeTab={this.state.activeTab}> <TabPane tabId="1"> <Row> <AAAPAge/> </Row> </TabPane> <TabPane tabId="2"> <Row> <BBBPage/> </Row> </TabPane> <TabPane tabId="3"> <Row> <CCCPage/> </Row> </TabPane> </TabContent> </div> </main> ); } } export default withRouter(XYZPage);
AAAPage,BBBPage和CCCPage中的每一个都是需要具有一些预填充下拉列表的组件,我在下面的index.js中声明了这些下拉列表:
index.js
const store = configureStore(); store.dispatch(loadAAA()); store.dispatch(loadBBB()); store.dispatch(loadCCC()); render(( <Provider store={store}> <BrowserRouter> <App /> </BrowserRouter> </Provider> ), document.getElementById('app'));
loadAAA,loadBBB和loadCCC都是重击
configureStore()方法如下:
export default function configureStore(initialState) { return createStore( rootReducer, initialState, composeWithDevTools( applyMiddleware(thunk, reduxImmutableStateInvariant()), ) ); }
为了缩短这篇文章,我给出了AAAPage的示例,因为其他页面的结构相似:
AAAPage.js:
class AAAPage extends React.Component { constructor(props, context) { super(props, context); this.state = {...}; } componentWillReceiveProps(nextProps) {...} render() { [...] return ( <Container fluid> <Row> <AAAInputForm // Data from Store is passed here /> </Row> {ChildComponent} </Container> ); } } AAAPage.propTypes = { DATA: PropTypes.array }; function mapStateToProps(state, ownProps) { let DATA = []; if (state.AAAReducer.length > 0) { DATA = state.AAAReducer; } return { DATA: DATA }; } export default withRouter(connect(mapStateToProps)(AAAPage));
AAAReducer.js:
export default function AAAReducer(state=initialState.AAAList, action) { switch(action.type) { case types.LOAD_AAA_SUCCESS: return action.AAAList; default: return state; } }
AAAAction.js:
export function loadAAASuccess(AAAList) { return { type: types.LOAD_AAA_SUCCESS, AAAList: AAAlList }; } // thunk export function loadAAA() { // A thunk will always return a function that accepts a dispatch return function(dispatch) { return apiCall("ALL").then(response => { dispatch(loadAAASuccess(response.data.AAA)); }).catch(error => { throw(error); }); }; }
initialState.js:
export default { AAAList: [], BBBList: [], CCCList: [] };
在这一点上,我相信我为代码提供了足够的背景知识。我在设计此Redux存储时遵循了教程,但是我不确定为什么当我从“ / abc / xyz”导航到“ / abc”并返回时,或者当我从“ / abc”导航到“ / abc / xyz”时,我尽管我在index.js上调用了loadAAA()方法,但是商店是空的。其他所有页面也会受到影响。但是,当我直接单击“ / abc / xyz”时,我的商店已连接并且我的下拉列表已填充。怎么了?是否因为我的生命周期方法?
我正在使用React v15.6.2,redux v3.7.2和redux-thunk v2.3.0。
感谢您的指导。
您只能loadAAA在的顶级调用,该顶级index.js仅在页面加载时执行一次。如果您希望在每次XYZPage页面渲染时都将其分派,请输入XYZcomponentDidMount
loadAAA
XYZPage
componentDidMount