Question

我正在使用redux，react-router和react-router-redux在react应用程序中工作。所以它是一个简单的应用程序，在这个应用程序中我需要使用一个简单的路由视图。我已经阅读了文档并且可以毫无问题地制作mi路线，但是在路线上添加模板的那一刻我遇到了问题。我需要将reducers的dispatched和State传递给视图，而Template for可以操作模板中的微调器和其他元素。我不确定如何制作它或者我是否正确制作。你能帮帮我吗？

这是我的路由器代码：

import React from 'react';
import ReactDOM from 'react-dom';

import {Provider} from 'react-redux';
import {Route} from 'react-router';
import {ConnectedRouter} from 'react-router-redux';
import {Switch} from 'react-router-dom';

import {store, history} from './store/index';
import Layout from './components/Layout';
import './bootstrap-3/css/bootstrap.min.css';

/* Components */
import Home from './components/abouts/home';
import About from './components/abouts/about';
import NoMatch from './components/abouts/nomatch';
import Artists from './components/artists';

const NodeId = document.getElementById('root');

ReactDOM.render(
    <Provider store={store}>
    <ConnectedRouter history={history}>
        <Layout>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route path="/about" component={About}/>
                <Route path="/artists" component={Artists}/>
                <Route component={NoMatch}/>
            </Switch>
        </Layout>
    </ConnectedRouter>
</Provider>, NodeId);

所以我不确定如何通过redux状态和派遣到路由的组件，所以我在每个组件中做了类似的事情，我认为有一种更好的形式。

import {connect} from 'react-redux';
import * as artistActions from './actions/artistActions';
import * as globalConfigActions from './actions/globalConfigActions';


class Abouts extends Component {
    render() {
        console.log('Abouts Component: ', this);
        return (
          <div>
            <h1>About</h1>
          </div>
        );
    }
}

const mapStaeToProps = (state) => {
    return {
      artist: state.artist,
      globalConfig: state.globalConfig
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchArtist: () => {
            return dispatch(artistActions.fetchArtist());
        },
        globalConfigActions: {
          showSpinner: () => {
              dispatch(globalConfigActions.showSpinner());
          },
          hiddenSpinner: () => {
              dispatch(globalConfigActions.hiddenSpinner());
          }
        }
    }
};

export default connect (mapStaeToProps, mapDispatchToProps)(About);

在那个表单中，我可以将State和派遣到组件传递给每个主要组件，但是我需要传递State并将调度发送到Template，当我尝试使用模板时，路由不起作用，并且视图不会改变。

如果我使用一个没有redux的“mapDispatchToProps”和“mapStaeToProps”的简单模板，它的工作原理很完美，但布局无法访问redux的方法或状态。

有人可以说我怎么能正确地做到这一点，拜托？

非常感谢

如何在响应路由器中包含布局模板？

0 个答案: