Question

我正在从头开始开发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。

感谢指导。

Answer 1

您只能在loadAAA的顶层调用index.js，该页面只会在页面加载时执行一次。如果您希望每次渲染XYZPage页面时都将其分派，请放入XYZ的componentDidMount

Answer 2

@AKJ-@Andy Ray正确地说了一点，但是我想补充一点，componentDidMount是加载async调用的最佳位置，因为它是在渲染之后以及大约{{1 }} redux存储会保留数据，直到刷新初始化重新刷新后刷新页面为止；如果需要在刷新后存储数据，请尝试redux-persist

Redux存储未连接

2 个答案: