react.js - redux 没法传递到 页面组件中的props去？

问题描述

问 题

项目结构

app.js

//base
import React from 'react';
import ReactDom from 'react-dom';

//redux
import {Provider, connect} from 'react-redux'
import store from './store/index';


//react-route
import AppRoutes from './router/index';


//render
ReactDom.render(
    <Provider store={store}>
        <AppRoutes/>
    </Provider>,
    document.getElementById('root')
);

app.jsx

//base
import React from 'react';
import PropTypes from 'prop-types';

//component
import UI from './component/ui';

//style
require("./common/common.less");
require('./common/resize');

export default class App extends React.Component {
    //初始化 组件 属性和状态
    constructor(props) {
        console.log(props);
        super(props);

        this.state = {
            msg: "app react"
        };
    }


    render() {
        return <div className="react-content">
            {this.props.children}
            <UI />
        </div>

    }

}

router/index.js

import React from 'react';
import {
    BrowserRouter as Router,
    Route,
    HashRouter,
    Link,
    Switch
} from 'react-router-dom';


//路由 页面 的加载（推荐单文件的写法）
// import Home from '../pages/home.jsx';
import Simple from '../pages/simple.jsx';
import Classify from '../pages/classify.jsx';
import ReactRedux from '../pages/react-redux.jsx';

//不推荐这样写
const Home = () => (
    <div className="up-page page-home">
        <div className="up-header">Home</div>
    </div>
);

// 路由配置
const routes = [
    {path: "/", text: "home", component: Home},
    {path: "/home", text: "home", component: Home},
    {path: "/simple", text: "test", component: Simple},
    {path: "/classify", text: "classify", component: Classify},
    {path: "/reactRedux", text: "reactRedux", component: ReactRedux}
];

//主入口文件
import App from '../app.jsx';

const AppRouter = () => (
    <HashRouter>
        <App>
            {
                routes.map((page, index) => page.component ?
                    <Route key={index} exact path={page.path} component={page.component}/> : "")
            }
        </App>
    </HashRouter>
);


export default AppRouter;

store/index.js

//base
import {createStore, combineReducers, applyMiddleware} from 'redux';
import * as reducer from './reducers/index';
// import thunk from 'redux-thunk';

//创建一个 Redux store 来以存放应用中所有的 state，应用中应有且仅有一个 store。

var store = createStore(
    combineReducers(reducer),
    // applyMiddleware(thunk)
);


export default store;

store/reduces/index.js

export default (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state - 1
        default:
            return state
    }
}

备注：
项目地址：https://github.com/wxungang/r...

解决方案

你这个代码怎么跑的？

这篇关于react.js - redux 没法传递到 页面组件中的props去？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！