反应路由器不使用渲染元件时使用REDX

我正在学习react和redux.I构建一个模拟项目，虽然运行该项目没有错误，但是当我点击主线路时没有呈现任何错误，我的容器代码，反应路由器不使用渲染元件时使用REDX

import Home from '../components/Home.js' 
 
import { 
 
    editorContentUpdated 
 
} from '../action/index.js' 
 

 

 
const mapStateToProps = (state) => { 
 
    return { 
 
    editorText: state.editorText 
 
    }; 
 
} 
 

 

 
const mapDispatchToProps = (dispatch) => { 
 
    console.log('here') 
 
    onBlur: (text) => { 
 
    console.log('text', text); 
 
    dispatch(editorContentUpdated(text)); 
 
    } 
 
} 
 

 
export default (mapStateToProps, mapDispatchToProps)(Home);

减速器代码，

const editorReducer = (state, action) =>{ 
 
    if(state == undefined){ 
 
     return null 
 
    } 
 
    console.log('editorReducer',action.payload); 
 
    switch(action.type){ 
 
     case 'EDITOR_SELECTED': 
 
     return action.payload 
 
     break; 
 
     case 'CONTENT_UPDATED': 
 
     return action.payload 
 
     break; 
 
    } 
 
    return state; 
 

 
} 
 
export default editorReducer;

行动创世，

export const getPreviewContent = (text) =>{ 
 
    console.log('previewContent', text); 
 
    return{ 
 
     type:'PREVIEW_SELECTED', 
 
     data:text 
 
    } 
 
} 
 
export const editorContentUpdated =(text) =>{ 
 
    console.log('editor content', text); 
 
    return { 
 
     type:'CONTENT_UPDATED', 
 
     data:text 
 
    } 
 
}

routes.js文件，

import React from 'react' 
 
import{Router,Route,IndexRoute,browserHistory} from 'react-router' 
 
import Layout from '../components/Layout.js' 
 
import Home from '../container/editor.js' 
 
import Preview from '../components/Preview.js' 
 
const routes = (
 
    <Router history={browserHistory}> 
 
     <Route path='/' component={Layout}> 
 
      <IndexRoute component={Home} /> 
 
      <Route path='preview' component={Preview} /> 
 
     </Route> 
 
    </Router> 
 
); 
 
export default routes;

布局，

import React from 'react' 
 
import { 
 
    Link 
 
} from 'react-router' 
 
import { 
 
    connect 
 
} from 'react-redux' 
 

 
var Layout = React.createClass({ 
 
    render: function() { 
 
    var styles = { 
 
     paddingRight: '10px' 
 
    } 
 
    console.log('custom', this.props.custom); 
 
    var custom = this.props.custom; 
 
    return (<html > 
 
     <head > 
 
     <title > {custom.title} < /title> <link rel = 'stylesheet href = '/style.css'/> 
 
     </head> <body > 
 
     <nav > 
 
     <Link style = {styles 
 
     }to = '/' > Home < /Link> < 
 
     Link to = '/preview' > Preview < /Link> </nav> { 
 
     this.props.children 
 
     }<script dangerouslySetInnerHTML = {{ 
 
      __html: 'window.PROPS=' + JSON.stringify(custom) 
 
     }}/> <script src = '/bundle.js'/> 
 
     </body> </html>);} 
 
}); 
 

 
var wrapper = connect(
 
    function(state) { 
 
    return { 
 
     custom: state 
 
    }; 
 
    } 
 
); 
 

 
export default wrapper(Layout);

首页组件，

import React from 'react' 
 
import { 
 
    Link 
 
} from 'react-router' 
 
let Home = React.createClass({ 
 
    getInitialState: function() { 
 
    return { 
 
     editorText: '' 
 
    } 
 
    }, 
 
    updateText: function(event) { 
 
    this.setState({ 
 
     editorText: event.target.value 
 
    }) 
 
    }, 
 
    render: function() { 
 
    let wrapperStyle = { 
 
     width: '100%' 
 
    } 
 
    let editorStyle = { 
 
     float: 'left', 
 
     width: '50%', 
 
     height: 'auto' 
 
    } 
 
    let previewBoxStyle = { 
 
     float: 'left', 
 
     height: 'auto', 
 
     width: '50%' 
 
    } 
 
    return (< 
 
     div style = { 
 
     wrapperStyle 
 
     } > 
 
     < 
 
     div style = { editorStyle} > 
 
     <textarea rows = '10' cols = '50'onChange = {this.updateText} 
 
     value = {this.props.editorText}/> </div> </div>);} 
 
});

有在控制台没有错误，但是当我点击主页按钮家里组件没有渲染，任何人都可以建议我哪里错了？

来源

2017-03-04 Idlliofrio

C你分享你的'Layout'和'Home'组件的代码吗？ –

我已添加组件代码 – Idlliofrio

在你Home组件，我不能看到你导出组件，因此该组件将不会被渲染

的Home组件导出为

export default Home;

此外，当您使用反应 - 终极版您需要使store可用于您的组件，因为您需要使用Provider

import { Provider } from 'react-redux' 


import React from 'react' 
import{Router,Route,IndexRoute,browserHistory} from 'react-router' 
import Layout from '../components/Layout.js' 
import Home from '../container/editor.js' 
import Preview from '../components/Preview.js' 
import { createStore } from 'redux' 
import EditorReducer from '/path/to/reducer'; 
.... 
const store = createStore(EditorReducer) 
const routes = (
    <Provider store={store}> 
    <Router history={browserHistory}> 
     <Route path='/' component={Layout}> 
      <IndexRoute component={Home} /> 
      <Route path='preview' component={Preview} /> 
     </Route> 
    </Router> 
    </Provider> 
); 
export default routes;

来源

2017-03-04 06:48:16

反应路由器不使用渲染元件时使用REDX

回答

相关问题