Question

我有一个Root组件，它具有我的应用程序的所有路由，如下所示：

export class Root extends Component {
 static propTypes = {
     store: PropTypes.object.isRequired
 };
 render() {
   const { store } = this.props
   const history = syncHistoryWithStore(browserHistory, store)
   history.listen(location => store.dispatch(addHistory(location)))
   return (
    <Provider store={store}>
      <Router history={history}>
        <Route path="/" component={Landing}/>
        <Route component={Main} >
         <Route path="/selfRegistration" component={SelfRegistrationForm}/>
         <Route path="/login" component={Login} />
         <Route path="/aboutus" component={AboutUs} />
         <Route path="/help" component={UserHelp} />

我希望从ajax调用获得的一些基础数据可以填充在所有路由中。我已将数据存储在名为dataReducer的reducer中。

我想将数据作为道具传递给我的所有路线，但是当我将我的redux状态连接到Root组件时，如下所示：

function mapStateToProps(state) {
 return {
  langData: state.languageText
 }
}

export default connect(mapStateToProps)(Root)

我收到了以下警告：

**** warning.js？85a7：35警告：setState（...）：无法在现有状态转换期间更新（例如在render或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数;构造函数副作用是一种反模式，但可以移动到componentWillMount。**

** browser.js？b253：49警告：[react-router]你无法改变;它将被忽略****

我知道连接再次将数据添加到已配置的路由器中，该路由器可能会妨碍所有内容。但是这样做的标准方法是什么。

我只想访问此根组件中的languageText reducer。

谢谢

Answer 1

我试图像这样连接它是愚蠢的。但由于它是第三方架构，因此无法更改组件树。

我已经使用了商店的订阅功能来获取languageText Reducer数据。我现在的代码是：

export default class Root extends Component {
 constructor(props) {
  super(props);
  this.currentLangValue = {};
  this.handleDataChange = this.handleDataChange.bind(this);
 }
 static propTypes = {
  store: PropTypes.object.isRequired
 };
 handleDataChange(store) {
 let previousValue = this.currentLangValue;
 this.currentLangValue = store.getState().languageText;
 if (previousValue != this.currentLangValue) {
   console.log(this.currentLangValue,'asjdhgsadasjdabsadhasdb');
 }
}
render() {
  const { store } = this.props;
  const history = syncHistoryWithStore(browserHistory, store)
  store.subscribe(() => this.handleDataChange(store))
  history.listen(location => store.dispatch(addHistory(location)))

  return (
   <Provider store={store}>
    <Router history={history}>
      <Route path="/" render={() => { <Landing props={this.currentLangValue}/> }} />
      <Route component={Main} >
        <Route path="/selfRegistration" component={SelfRegistrationForm}/>
        <Route path="/login" component={Login} />

获取我的reducer数据以路由组件

1 个答案: