快捷搜索:  as

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(

{ routes }

,

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 = (

export default routes;

您可能还会对下面的文章感兴趣: