使用redux时反应路由器不渲染组件答案

【问题标题】：react router not rendering the component when using redux使用redux时反应路由器不渲染组件
【发布时间】：2017-03-04 05:59:55
【问题描述】：

我正在学习 react 和 redux。我正在构建一个模拟项目，在运行项目时没有错误但是当我单击主路由时没有呈现任何内容，我的容器代码，

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);

reducer 代码，

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>);}
});

控制台没有错误，但是当我点击主页按钮时，主页组件没有呈现，谁能建议我哪里出错了？

【问题讨论】：

您能分享一下Layout 和Home 组件的代码吗？
我已经添加了组件代码

标签： reactjs redux react-router

【解决方案1】：

在您的Home 组件中，我看不到您正在导出该组件，因此该组件不会被渲染

将Home 组件导出为

export default Home;

此外，当您使用 react-redux 时，您需要使 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;

【讨论】：