react 与react-redux 实践

 入口文件

#index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { LocaleProvider } from 'antd';
import * as BizCharts from "bizcharts";
import { Provider } from "react-redux";
import store from "./store";

import 'antd/lib/table/style/css'
import 'antd/lib/popconfirm/style/css'
import 'antd/lib/form/style/css'
import 'antd/lib/date-picker/style/css'
import 'antd/lib/slider/style/css'
import 'antd/lib/breadcrumb/style/css'
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import './index.css'
import 'antd/lib/layout/style/css';
import 'antd/lib/menu/style/css';

BizCharts.track(false);

ReactDOM.render(
    <Provider store={store}> // redux 数据事件管理
        <LocaleProvider > // antd 组件
            <App />
        </LocaleProvider >
    </Provider>,
    document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

 全局布局文件

#App.js

import React, { Component } from 'react';
import { Layout} from 'antd';
import { BrowserRouter as Router } from 'react-router-dom';
import Header from './header';
import Content from './content';
import Menu from './menu';

class App extends Component {
  render() {
    return (
      <Router >
        <Layout >
          <Menu />
          <Layout>
            <Header />
            <Content />
          </Layout>
        </Layout>
      </Router>
    );
  }
}

export default App;

 全局数据流向和事件仓库

#store/index.js

import { createStore, applyMiddleware } from 'redux'
import reducer from './reducer'
import thunk from 'redux-thunk';

const store = createStore(
    reducer,
    applyMiddleware(thunk)
);

export default store; 


#store/reducer.js

import { combineReducers } from 'redux-immutable'
import { reducer as headerReducer } from '../header/store'
import { reducer as menuReducer } from '../menu/store'
import { reducer as dashboardReducer } from '../dashboard/store'

export default combineReducers({
    header: headerReducer,
    menu: menuReducer,
    dashboard: dashboardReducer
})

界面组件实现

example 

header 组件

#header/index.js

import React, { Component } from 'react';
import { Layout, Icon, Breadcrumb } from 'antd';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { Link } from 'react-router-dom'
import { List, is } from 'immutable'

const { Header } = Layout;

class HeaderWapper extends Component {

    componentWillMount() {
        const { location, pageChange, menuItemChange } = this.props;
        const pathSnippets = window.location.pathname.split('/').filter(i => i);
        const selectedKeys = [];
        const extraBreadcrumbItems = pathSnippets.map((_, index) => {
            selectedKeys.push(_);
            const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
            return (
                <Breadcrumb.Item key={url}>
                    <Link to={url}>
                        {_}
                    </Link>
                </Breadcrumb.Item>
            );
        })
        const newbreadcrumbItems = [(
            <Breadcrumb.Item key="home">
                <Link to="/">
                    <Icon type="home" />
                </Link>
            </Breadcrumb.Item>
        )].concat(extraBreadcrumbItems);
        pageChange(List(newbreadcrumbItems));
    }

    render() {
        const { toggle, collapsed, breadcrumbItems } = this.props;
        return (
            <Header style={{ background: '#fff', padding: 0 }}>
                <Icon
                    className="trigger"
                    type={collapsed ? 'menu-unfold' : 'menu-fold'}
                    onClick={() => { toggle(collapsed) }}
                />
                <Breadcrumb style={{ display: 'inline-block' }}>
                    {breadcrumbItems.toJS()}
                </Breadcrumb>
            </Header>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        collapsed: state.getIn(['header', 'collapsed']),
        breadcrumbItems: state.getIn(['header', 'breadcrumbItems'])
    }
}

const mapDispathToProps = (dispatch) => {
    return {
        toggle(collapsed) {
            dispatch(actionCreators.toggle(collapsed));
        },
        pageChange(newbreadcrumbItems) {
            dispatch(actionCreators.pageChange(newbreadcrumbItems));
        }
    }
}

export default connect(mapStateToProps, mapDispathToProps)(HeaderWapper);

#header/store/index.js

import reducer from './reducer';
import * as actionCreators from './actionCreator';
import * as constants from './constants';

export { reducer, actionCreators, constants }

#header/store/reducer.js

import React, { Component } from 'react';
import { fromJS } from 'immutable';
import * as constants from './constants';
import { Icon, Breadcrumb } from 'antd';
import { Link } from 'react-router-dom';

const defaultState = fromJS({
    collapsed: false,
    breadcrumbItems: [(
        <Breadcrumb.Item key="home">
            <Link to="/">
                <Icon type="home" />
            </Link>
        </Breadcrumb.Item>
    )]
});

export default (state = defaultState, action) => {
    switch (action.type) {
        case constants.TOGGLE:
            return state.set('collapsed', action.collapsed);
        case constants.PAGE_CHANGE:
            return state.set('breadcrumbItems', action.breadcrumbItems);
        default:
            return state;
    }
}

#header/store/actionCreator.js

import * as constants from './constants';

export const toggle = (collapsed) => ({
    type: constants.TOGGLE,
    collapsed: collapsed
});

export const pageChange = (breadcrumbItems) => ({
    type: constants.PAGE_CHANGE,
    breadcrumbItems: breadcrumbItems
});

效果图