最新版本 react-router-redux 5.0 路由DEMO
原文链接:https://www.f2er.com/react/302725.htmlnpm 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') )