1、集成react+redux的场景。
在不同的路由页面下，控制公共的头部显示和隐藏等功能。因为路由和Header之间不是直接的父组件和子组件的关系，所以通过pros传参满足不了。这个时候引入redux共享state（redux的state和component里的state毫无关系http://www.jianshu.com/p/ae9）
redux包含三个主要文件action.js主要通过常量定义操作方法；reduer.js主要描述action对应的方法具体操作。Store将state和reduer关联起来。
2、操作流程
在app.js里面创建store（store = createStore(todoApp)）后
在对应的组件页面注入state和dispatch到props。这样在组件里就可以直接进行调用action里面对应的方法（原始：使用this.props.dispatch（action）;bindActionCreators绑定后用此方法：this.props.showHeader({showHeader:false})）。
function&mapStateToProps(state){
header:state.header,
function&mapDispatchToProps(dispatch){
return&bindActionCreators({showHeader},dispatch)
module.exports&= connect(mapStateToProps, mapDispatchToProps)(IndexShow);
通过dispatch调用reducer里面就可以修改state。这样注入到其他component里面的state参数也能进行相应的修改。
1、Export时如果有header参数则，state的key就是header，否则是showHeaderName
2、监控state的变化时调用此方法监控store写在单独文件导出。
let unsubscribe = store.subscribe(() =& {
&&let newState = store.getState() // 获取更新后最新的state树
&&&&console.log(newState)
// &&component.setState(...) // 这里的component可以是this
阅读(...) 评论()在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
redux和react-router的理念有冲突吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
一个是状态容器 一个是负责路由
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。react-router负责路由
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
有，因为react-router对store的改动不走reducer，导致router改变的逻辑无处安放
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)redux-react-router
Documentation is in progress. Please refer to the
in the meantime.
Redux bindings for React Router.
Keep your router state inside your Redux Store.
Interact with the Router with the same API you use to interact with the rest of your app state.
Completely interoperable with existing React Router API. &Link /&, router.transitionTo(), etc. still work.
Serialize and deserialize router state.
Works with time travel feature of Redux Devtools!
npm install --save redux-react-router
React Router is a fantastic routing library, but one downside is that it abstracts away a very crucial piece of application state — the current route! This abstraction is super useful for route matching and rendering, but the API for interacting with the router to 1) trigger transitions and 2) react to state changes within the component lifecycle leaves something to be desired.
It turns out we already solved these problems with Flux (and Redux): We use action creators to trigger state changes, and we use higher-order components to subscribe to state changes.
This library allows you to keep your router state inside your Redux store. So getting the current pathname, query, and params is as easy as selecting any other part of your application state.
import React from 'react';import { combineReducers, applyMiddleware, compose } from 'redux';import { Provider } from 'react-redux';import { reduxReactRouter, routerStateReducer, ReduxRouter } from 'redux-react-router';
Configure routes like normal const routes = (
&Route path=&/& component={App}&
&Route path=&parent& component={Parent}&
&Route path=&child& component={Child} /&
&Route path=&child/:id& component={Child} /&
&/Route&);
Configure reducer to store state at state.router
You can store it elsewhere by specifying a custom `routerStateSelector`
in the store enhancer below const reducer = combineReducers({
router: routerStateReducer});
Compose reduxReactRouter with other store enhancers const store = compose(
applyMiddleware(m1, m2, m3),
reduxReactRouter({
createHistory
devTools())(createStore)(reducer);
Elsewhere, in a component module... import { connect } from 'react-redux';import { pushState } from 'redux-react-router'; connect( Use a selector to subscribe to state
state =& ({ q: state.router.location.query.q }),
Use an action creator for navigation
{ pushState })(SearchBox);
Works with Redux Devtools (and other external state changes)
redux-react-router will notice if the router state in your Redux store changes from an external source other than the router itself — e.g. the Redux Devtools — and trigger a transition accordingly!
reduxReactRouter({ routes, createHistory, routerStateSelector })
A Redux store enhancer that adds router state to the store.
routerStateReducer(state, action)
A reducer that keeps track of Router state.
&ReduxRouter&
A component that renders a React Router app using router state from a Redux store.
pushState(state, pathname, query)
An action creator for history.pushState().
replaceState(state, pathname, query)
An action creator for history.replaceState().
Bonus: Reacting to state changes with redux-rx
This library pairs well with
to trigger route transitions in response to state changes. Here's a simple example of redirecting to a new page after a successful login:
const LoginPage = createConnector(props$, state$, dispatch$, () =& {
const actionCreators$ = bindActionCreators(actionCreators, dispatch$);
const pushState$ = actionCreators$.map(ac =& ac.pushState);
Detect logins
const didLogin$ = state$
.distinctUntilChanged(state =& state.loggedIn)
.filter(state =& state.loggedIn);
Redirect on login!
const redirect$ = didLogin$
.withLatestFrom(
pushState$, Use query parameter as redirect path
(state, pushState) =& () =& pushState(null, state.router.query.redirect || '/')
.do(go =& go());
return combineLatest(
props$, actionCreators$, redirect$,
(props, actionCreators) =& ({
...actionCreators
A more complete example is forthcoming.
T17:34:39.904Z
1.0.0-beta3
is the latest
of 9 releases
Collaborators
downloads in the last day
downloads in the last week
downloads in the last month
Have an issue?
Try it out
Dependencies (1)在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
//在root.js文件入口使用，我要全局操作一些方法
let appHistory = useRouterHistory(createHashHistory)({ queryKey: false });
_global_.store = configureStore();//全局的数据；
_global_.history = syncHistoryWithStore(appHistory, _global_.store);//全局的历史
export default class Root extends Component {
constructor(props, context) {
super(props, context);
render() {
&Provider store={_global_.store}&
&Router history={_global_.history}&
&/Provider&
1、Redux、store中的不解
设想一个场景，一个商品页面和一个购物车页面；商品页面一个商品加入购物车，要提示购物车的数据更新，在商品页面中处理异步就不需要设计dispath，直接使用_global_.store.getState()['cart'].isLoading=0
直接改变了redux中store的值...有时候就想改变某个值，连action，reducer（就是dispath就不用设计了）都省了，是不是有什么坏的影响（数据变的不可测？我觉得项目是自己的，有些地方反而加速了开发，（一个页面要影响另一个页面的数据）像这些异步回来的可以直接操作store，不设计dispath不是更好？也很方便）只是遇到了疑惑，还没使用这种方式，不过的确可行，还望指点一二
2、Router、history中的不解
再设想一个场景，你的很多子组件如果不传递 history参数是拿不到方法的，一定要由父组件传递下去，感觉有点别扭，比如一些点击事件的跳转或者异步回调，为了不使用location.href的方法（会刷新整个资源），将之前参数传递下来的使用方法this.props.history.pushState(null,'/home')转变为_global_.history.pushState(null,'/home')就可以省去多个子组件要传递history方法才可以跳转；
还望小伙伴指点一二；
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
推荐看看 mobx。
用 react-router-redux, 直接在子组件里dispatch(push(/home))。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
第一点：使用dispatch的好处应该是所有对state的修改都被统一入口，这样就有了middleware这样的东西，给redux提供更多可能。另外可以提供统一的state变动listener subscribe。当然也可像vue那样给属性定义setter的方式监听变化，只是实现不同。第二点：router没用过，期待大神回答。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
1.至少说明了一点redux是利用数据引用(shallow equal)，就不要直接操作了；
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
1.写redux 那一套 action、reducer，有时的确很繁琐，但有时也的确利于维护和复用state，我认为可以酌情考虑是否需要，对于只用一次的数据，或者单个组件的状态（比如关注），这些直接组件内部维护状态就行了，没必要写个store。
2.router的history抽到全局，我觉得挺好，方便操作，react我用的不多。但是例如vue router，他其实是将router以$router的形式注册到Vue.prototype,这样在任何一个子组件内部，都可以方便的以 this.$router.push()形式，改变路由。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}