react-router-redux 5.0 helloworld

前端之家收集整理的这篇文章主要介绍了react-router-redux 5.0 helloworld前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
最新版本 react-router-redux 5.0 路由DEMO
  1. npm install react-router-redux@next --save

使用了 redux-react,react-saga,react-router,react-router-redux
实现了路由跳转(react-router-redux)、异步数据操作(saga)

  1. import React,{Component} from 'react'
  2. import ReactDOM from 'react-dom'
  3. import {createStore,combineReducers,applyMiddleware} from 'redux'
  4. import {Provider,connect} from 'react-redux'
  5. import createHistory from 'history/createBrowserHistory'
  6. import {Route} from 'react-router'
  7. import {ConnectedRouter,routerReducer,routerMiddleware,push} from 'react-router-redux'
  8. import createSagaMiddleware,{takeEvery} from 'redux-saga'
  9. import {put,fork} from 'redux-saga/effects'
  10.  
  11. function reducers(state = 1,action) {
  12. switch (action.type) {
  13. case 'Done':
  14. return state + action.payload;
  15. default:
  16. return state;
  17. }
  18. };
  19. const history = createHistory()
  20. const routeMiddleware = routerMiddleware(history);
  21.  
  22. export function* AddAsync() {
  23. yield new Promise(function (resolve) {
  24. setTimeout(function () {
  25. resolve()
  26. },1000)
  27. })
  28.  
  29. yield put({type: 'Done',payload: 1})
  30.  
  31. }
  32. function* watchIncrementAsync() {
  33.  
  34. yield* takeEvery('ADD',AddAsync)
  35. }
  36. var sagaMiddleware = createSagaMiddleware();
  37.  
  38. const store = createStore(
  39. combineReducers({
  40. reducers,router: routerReducer
  41. }),applyMiddleware(routeMiddleware,sagaMiddleware)
  42. )
  43. sagaMiddleware.run(watchIncrementAsync)
  44.  
  45. var Home = () => <div onClick={() => store.dispatch(push('/cal'))}>Home 点我跳转的计算页面
  46. </div>
  47. var Cal = () => <div onClick={() => {
  48. store.dispatch({
  49. type: 'ADD',payload: 1
  50. })
  51. }
  52. }>点我加1</div>
  53.  
  54.  
  55. var ShowDataIn = (props) => <div>{props.value}</div>;
  56. // 由于使用了combineReducers 这里多了一层
  57. 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') )

猜你在找的React相关文章