react项目中引入redux+react-router的一些写

Redux + react-router

关于redux中间件的理解
https://zhuanlan.zhihu.com/p/20597452
http://www.cnblogs.com/JhoneLee/p/5771541.html

1.根节点引入react-redux的provider和routes(路由)

import React from 'react'                   
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'          
import configureStore from './store'    // store返回的configureSotore函数
import routes from './routes'           // 路由文件

const store = configureStore();

ReactDOM.render(
<Provider store = { store }>
    { routes }
</Provider>,
document.getElementById('main')
);

2. store--index.js (redux—store文件)

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import reducers from '../reducers'

const composedCreateStore = compose(
    applyMiddleware(thunk)
)(createStore)

function configureStore(initState = {}){
    const store = composedCreateStore(reducers, initState);
    return store
}
export default configureStore;

3. reducers--index.js

import { combineReducers } from 'redux'

import ...
// (细分的reducer模块)
const reducers = {
    ...
    // (import的reducer模块)
}

export default combineReducers({
    ...reducers
})

3.1 reducers--reducer1--index.js

import initState from 'CONSTS/initState';
// 所有redux的state全放在const里
import { ACTION_TYPES } from 'CONSTS/consts';
// 存放所有的action_type

export default function reducer1(state = initState, action) {
    switch (action.type) {
        case ACTION_TYPES.TYPE1:
            return(
                ...state,
                state1: action.state1
            );
        default:
            return state;
    }
}

4. actions--action1--index.js

import { ACTION_TYPES } from "CONSTS/consts"

export function getApplyInfo(applyInfo) {
  return {
    applyInfo,
    type: ACTION_TYPES.APPLY.GET_LIST
  };
}

5.view--A--index.js

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as action1Action from 'ACTIONS/action1';

onchange () {
    const { applyAction, list } = this.props;
    action1Action.getApplyInfo(list);
}

const mapStateToProps = state => {
    return {
        state1: state.action1.state1
    }
}

const mapDisPatchToProps = (dispatch) => ({
    action1Action: bindActionCreators(action1Action, dispatch)
})

export default connect(mapStateToProps, mapDisPatchProps)(A) 

React-Router

routes--index.js

import React from 'react'
import Main from 'COMPONENTS/Main';
import ...
// 引入所有路由组件
import {
  Router,
  Route,
  IndexRoute,
  hashHistory
} from 'react-router';

const routes = (
<Router history={hashHistory}>
<Route path="/" component={Main}>
  <IndexRoute component={QuickApply} />
  <Route path="quickApply" component={QuickApply} />
  <Route path="myApply" component={MyApply} >
    <IndexRoute component={ApplyList} />
    <Route path="applyList" component={ApplyList} />
    <Route path="readDetails" component={ReadDetails} />
    <Route path="consult" component={Consult} />
    <Route path="drafts" component={Drafts} >
      <IndexRoute component={DraftsList} />
      <Route path="draftsList" component={DraftsList} />
      <Route path="readDetails" component={ReadDetails} />
    </Route>
  </Route>
</Route>
</Router>
  
export default routes;