## **react-redux** **react-redux**负责状态管理，将react 组件划分为容器组件和展示组件，容器组件是react-redux提供的 展示组件：只是负责展示 UI，不涉及到逻辑的处理，数据来自父组件的props; 容器组件：负责逻辑、数据交互，将 state 里面的数据传递给展示组件进行 UI 呈现 - Provider -- 所有组件拿到state react-redux提供了Provider组件。用这个Provider包裹根组件，将redux导出的state，作为参数往下面传 ```js import { Provider } from "react-redux"; import App from "./App"; import { store } from "./store"; // 这个store由redux导出 <Provider store={store}> <App /> </Provider>; return ``` **Provider原理--跨级通信Context实现的** store放在了上下文对象context上面。然后子组件就可以从context拿到store ```js class VisibleTodoList extends Component { componentDidMount() { const { store } = this.context; this.unsubscribe = store.subscribe(() => this.forceUpdate() ); } render() { const props = this.props; const { store } = this.context; const state = store.getState(); } } VisibleTodoList.contextTypes = { store: React.PropTypes.object } ``` - connect---组件如何收到state变更信息？ 它共有四个参数mapStateToProps, mapDispatchToProps, mergeProps以及options。 mapStateToProps 的作用是将store里的state（数据源）绑定到指定组件的props中 mapDispatchToProps 的作用是将store里的action（操作数据的方法）绑定到指定组件的props中 不需要手动的去用store.subscribe订阅render函数以达到更新页面 ## **结合connected-react-router** 想在store里面拿到router，操作router，记录router改变。 例如把用户是否登录的状态存在redux里面，在登录之后会进行页面的跳转。在发起请求之后，得到一个状态，此时dispatch一个action去改变redux的状态，同时进行路由跳转，类似于这样:store.dispatch(replace('/home'))。 - connected-react-router是一个绑定react-router到redux的组件，来实现双向绑定router的数据到redux store中，我们需要用到 connected-react-router和history两个库。 - history生成history对象，connected-react-router的connectRouter生成routerReducer，同时connected-react-router的routerMiddleware实现dispatch action导航 ---> store.dispatch(replace('/home')): 对于Redux：创建routerReducer；创建routerMiddleware 对于组件：封装一个高阶组件，把history放进ConnectedHistory做一个新的Router对象出来；用新的Router对象替换掉原来的属于react-router的BrowserRouter ```js import React from 'react'; import { createBrowserHistory } from 'history'; import { routerMiddleware as createRouterMiddleware, connectRouter, ConnectedRouter, } from 'connected-react-router'; export const history = createBrowserHistory(); export const routerReducer = connectRouter(history); export const routerMiddleware = createRouterMiddleware(history); export const Router = props => <ConnectedRouter history={history} {...props} />; ``` 当利用Link路由跳转时，会通过react-router-dom进行路由跳转，并且也会通过connected-react-router发起一个action去更新redux state里面的router对象，以记录路由的变化。 同时在状态管理的时候，也可通过connected-react-router提供的push、replace等方法，从 redux 出发，即先发起一个action，然后再进行路由跳转。