首页 > react+ redux 同构关于组件结构问题

react+ redux 同构关于组件结构问题

我看 react的 组件是有 containers 与 components 组成, containers 主要是传递state 和 调用store 用, components 主要是起到显示作用, 现在的问题是我的组件containers 如果直接引入 containers的话 是无法触发服务端render 这个containers的, 我用的 redux-async-connect 来进行server端接口数据渲染
现在 containers只有在 route的情况下 才能正常的渲染出来,不知道有什么办法能解决我的这种想法
下面是我的一些重要部分的代码

Route.js

import { Route , IndexRoute } from "react-router";
import React from "react";
import CoreLayout from "./layouts/CoreLayout";
import App from "./apps/App";
import Slider from "./containers/Slider";

export default (
  <Route name="app" path="/" component={CoreLayout}>
    <IndexRoute component={App}/>
    <Route path="slider" component={Slider}/>
  </Route>
);

App.js

import React ,{Component} from 'react'
import Header from '../../components/ComponentHeader'
import MainInfo from '../../components/ComponentMainInfo'
import Features from '../../components/ComponentFeatures'
import Footer from '../../components/ComponentFooter'
class App extends Component {
  render(){
    return (
      <div>
        <Header/>
        <MainInfo/>
        <Features/>
        <Footer />
      </div>
    )
  }
}

export default App

ComponentMainInfo.js

import React , {Component} from 'react'
import ContainerSlider from '../../containers/Slider'
require('./index.styl');
export default class MainInfo extends Component {
  render(){
    return (
      <div className="mainInfo">
          <ContainerSlider/>
      </div>
    )
  }
}

Slider.js

import React, {Component, PropTypes} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'
import {isLoaded,load} from '../actions/slider'
import ComponentSlider from '../components/ComponentSlider'
import { asyncConnect } from 'redux-async-connect';
@asyncConnect({
  slider: (params, helpers) => {
    const {dispatch, getState} = helpers.store;
    return dispatch(load());
  }
})
@connect(
  state => ({slider:state.slider}),
  dispatch => bindActionCreators({load},dispatch)
)
export default class ContainerSlider extends Component {
  render(){
    const {load} = this.props;
    return (
      <div>
        <ComponentSlider/>
        <p onClick={load}>load</p>
      </div>
    )
  }
}

ComponentSlider.js

import React , {Component} from 'react'
import ReactDOM from 'react-dom'
import { connect } from 'react-redux'

@connect(
  state => ({slider:state.slider})
)

export default class Slider extends Component {
  render(){
    return (
        <div className="slider nivoSlider">
        {this.props.slider.data.results.map(item =>
          <img src={item.url} key={item.url} />
        )}
        </div>
      )
  }
}

我单独访问/slider 是可以渲染出来 ,但是在/ 下访问 slider 组件是无法渲染出来,这就是我的问题,谢谢帮忙解答~~

【热门文章】
【热门文章】