最新版本 react-router-redux 5.0 路由DEMO
- npm install react-router-redux@next --save
使用了 redux-react,react-saga,react-router,react-router-redux
实现了路由跳转(react-router-redux)、异步数据操作(saga)
- import React,{Component} from 'react'
- import ReactDOM from 'react-dom'
- import {createStore,combineReducers,applyMiddleware} from 'redux'
- import {Provider,connect} from 'react-redux'
- import createHistory from 'history/createBrowserHistory'
- import {Route} from 'react-router'
- import {ConnectedRouter,routerReducer,routerMiddleware,push} from 'react-router-redux'
- import createSagaMiddleware,{takeEvery} from 'redux-saga'
- import {put,fork} from 'redux-saga/effects'
-
- function reducers(state = 1,action) {
- switch (action.type) {
- case 'Done':
- return state + action.payload;
- default:
- return state;
- }
- };
- const history = createHistory()
- const routeMiddleware = routerMiddleware(history);
-
- export function* AddAsync() {
- yield new Promise(function (resolve) {
- setTimeout(function () {
- resolve()
- },1000)
- })
-
- yield put({type: 'Done',payload: 1})
-
- }
- function* watchIncrementAsync() {
-
- yield* takeEvery('ADD',AddAsync)
- }
- var sagaMiddleware = createSagaMiddleware();
-
- const store = createStore(
- combineReducers({
- reducers,router: routerReducer
- }),applyMiddleware(routeMiddleware,sagaMiddleware)
- )
- sagaMiddleware.run(watchIncrementAsync)
-
- var Home = () => <div onClick={() => store.dispatch(push('/cal'))}>Home 点我跳转的计算页面
- </div>
- var Cal = () => <div onClick={() => {
- store.dispatch({
- type: 'ADD',payload: 1
- })
- }
- }>点我加1</div>
-
-
- var ShowDataIn = (props) => <div>{props.value}</div>;
- // 由于使用了combineReducers 这里多了一层
- var ShowData = connect(({reducers: state}) => { return {value: state} })(ShowDataIn) ReactDOM.render( <Provider store={store}> {/* ConnectedRouter will use the store from Provider automatically */} <ConnectedRouter history={history}> <div> <Route exact path="/" component={Home}/> <Route path="/Cal" component={Cal}/> <ShowData/> </div> </ConnectedRouter> </Provider>,document.getElementById('root') )