dispatch 带上路由信息作为 action 的负载将路由信息存到 store,同时要能将路由信息从 Redux store 里面同步获取出来 这些可以通过 react-router-redux、connected-react-router 官方文档中提到的是 react-router-redux,并且它已经被整合到了 react-router v4 中,但是根据 react-router-redux 的文档,该仓库不再维护,推荐使用 connected-react-router 在create-react-app中使用安装所需中间件: yarn add connected-react-router history redux react-redux redux-devtools-extension import { createStore, applyMiddleware } from 'redux' import { connectRouter, routerMiddleware } from 'connected-react-router { render } from 'react-dom' import { Provider } from 'react-redux' import { ConnectedRouter } from 'connected-react-router
} from "react-router-redux"; 3.在action中使用 dispatch(push("/login")); 这个方法暂时只适用于我个人的系统,暂时没整理好,因为之前用的connected-react-router
要做到需要下载一个第三方模块: yarn add connected-react-router -S 然后就是配置,首先改造 rootReducer 文件中的内容: import appReducer /reducers/app"; import {combineReducers} from "redux"; import { connectRouter } from 'connected-react-router createBrowserHistory } from 'history' import thunk from "redux-thunk"; import { routerMiddleware } from 'connected-react-router } from "react-router-dom"; import { Provider } from "react-redux"; import { ConnectedRouter } from 'connected-react-router
import * as routerRedux from 'connected-react-router'; const { connectRouter, routerMiddleware } = routerRedux store 时调用,然后才调用 setupApp 可以看见针对 router 相关的 reducer 和中间件配置,其中 connectRouter 和 routerMiddleware 均使用了 connected-react-router
本段代码完全来自于 react-boilerplate 项目 import { combineReducers } from 'redux'; import { connectRouter } from 'connected-react-router
import { combineReducers } from 'redux' import { connectRouter } from 'connected-react-router' // import
还可以作为模块的更快,更小的插入式替换classnames 主要时配合jss拼接使用的 23.react-ConnectedRouter: connected-react-router是一个绑定react-router
image.png 特性: 整合了 Redux 生态比较流行的方案: immer(不可变数据变更),redux-saga(异步数据流处理),reselect(选取和映射 state,支持 memo,可复合),connected-react-router
借助 ReturnType // rootReducer.ts import {combineReducers} from 'redux'; import {connectRouter} from 'connected-react-router