react-router-redux
React Router redux
2023-09-11 14:15:30 时间
reducer与按需加载组件的时候,一并加载对应的state,具体流程就不多说了,看代码!
reducer
import { combineReducers } from 'redux' import { routerReducer } from 'react-router-redux' export const makeRootReducer = asyncReducers => { return combineReducers({ routing: routerReducer, ...asyncReducers }) } export const injectReducer = (store, {key, reducer}) => { if(!store.asyncReducers[key]) { store.asyncReducers[key] = reducer; store.replaceReducer(makeRootReducer(store.asyncReducers)); } }
store
import { applyMiddleware, compose, createStore, combineReducers } from 'redux' import { routerMiddleware } from 'react-router-redux' import thunkMiddleware from 'redux-thunk' import reducer, { makeRootReducer } from './reducer' export default (initialState = {}, history) => { const middleware = [thunkMiddleware, routerMiddleware(history)]; const enhancers = []; const store = createStore( makeRootReducer(), initialState, compose( applyMiddleware(...middleware), ...enhancers ) ); return store; }
router
import React, { Component } from 'react' import { Router, Route, Redirect } from 'react-router' const moduleRoute = require.context('../view', true, /router$/) //获取view视图下,所有router文件 const router = store => { return <Router> <Route path="/"> { moduleRoute.keys().map(key => { return moduleRoute(key).default(store) }) } <Redirect from='*' to='/' /> </Route> </Router> } export default router
入口文件app.js
import ReactDOM from 'react-dom' import { Router, hashHistory } from 'react-router' import React from 'react' import { Provider } from 'react-redux' import { syncHistoryWithStore } from 'react-router-redux' import createStore from '...上面的store' import router from '...上面的router' const store = createStore({}, hashHistory); store.asyncReducers = {}; const history = syncHistoryWithStore(hashHistory, store); ReactDOM.render(( <Provider store={store}> <Router history={history}> { router(store) } </Router> </Provider> ), document.getElementById("root"))
在view层级下创建一个test文件夹来编辑一下流程
在test/ index.jsx 中简单编辑下
import React, { Component } from 'react' import { connect } from 'react-redux' class Test extends Component { render() { const { value } = this.props; return <h1>{ value }</h1> } } const mapStateToProps = state => { return { ...state.test } } const mapDispathToProps = dispatch => { return { // } } export default connect(mapStateToProps, mapDispathToProps)(Test);
reducer
const initState = { value: 'value' } export default (state = initState, action) => { return state; }
router
import { Route } from 'react-router' import { injectReducer } from '...最上面定义的reducer' export default store => { return <Route path='test' getComponent={(nextState, cb) => { import('../'/* webpackChunkName: 'Test' */) .then(module => { injectRoducer(store, {key: test, reducer: require('../redux/reducer')}); cb(null, module.default); }) } }/> }
执行,在未加载该页面之前,store.state = { routing… };
进入test页面的时候, store.state = { routing…, test: { value: ‘value’ } }
相关文章
- [转] React Router 使用教程
- react-router 同一路由,参数不同,页面没有刷新
- React 中 keys 的作用是什么?
- 如何在 Vue 项目中,通过点击 DOM 自动定位VSCode中的代码行?(React 也适用)
- React vscode 创建 react 项目流程
- react图片预览插件尝试
- react-native疑难
- 初始化一个React项目(TypeScript环境)
- React高级篇(一)从Flux到Redux,react-redux
- React下reducer中处理数组&&对象的赋值改动
- 浅谈react-router和react-router-dom、react-router-native的区别
- react-router之路由定义
- React Native运行出现Could not find "iPhone X" simulator
- React及Nextjs相关知识点小结
- 试着用React写项目-利用react-router解决跳转路由等问题(二)