Redux、React-router知识点汇总

Redux基本概念

• redux中文官网
• 可参考博客“Redux入门（1）”、“Redux入门（2）”、Redux进阶(1)UI组件、容器组件、无状态组件
• store state（注意state不可变值，可用immutable.js）
• action（redux-thunk中间件可使action为函数）
• reducer是一个纯函数

单项数据流

• dispatch（action）
• reducer-> newState
• subscribe触发通知

在组件中调用actionCreator创建action方法，然后使用store.dispatch(action)将action传给store

• 获取store中数据：创建store=>创建reducers，设置state默认值=》store连接reducers=》组件TodoList连接store获取数据
• 改变store中数据：：
  1. 在actionTypes.js中创建type属性值由字符串转为常量
  2. 通过actionCreator创建 获取action对象的方法
  3. 组件中调用actionCreator的方法获取action对象并传给store
  4. store自动将收到的action和自己的state数据打包传送给reducer
  5. reducer处理action和state并返回newState值给store
  6. store获取到newState后自动替换state
  7. 组件中state由于监听函数，更新后页面重新渲染

react-redux

• 可参考Redux进阶(3)React-Redux的使用
• < Provider> 一般放在App.js中包裹组件最外层，使得被包含在该组件下的所有组件都有能力连接store
• connect()高阶组件，规定组件连接store的规则
  • mapStateToProps()，获取state的值放到组件的props上。(const mapStateToPrps = (state) => { return { xxx:state.xxx }}获取this.props.xxx)
  • mapDispatchToProps()，接受store的dispatch()为参数，函数中可自定义函数放到组件的props上,使props中的函数可以调用dispatch()派发action。(const mapDispatchToProps = (dispatch) => { return { ... }})

异步action

• 前端想要请求后端的数据时就需要用到ajax请求，而想要修改store中数据就要用到action，想在action中异步请求数据需要 异步action： 当然不能直接这么写，action默认只能是对象，需要Redux-thunk中间件使得action可为函数
• 可参考博客Redux进阶(2)Redux-thunk与Redux-saga中间件

中间件

• 可参考博客Redux进阶(2)Redux-thunk与Redux-saga中间件
• 注意：中间件指的是action和store的中间。只有redux才有action和store，所以只有redux才有中间件！（react没有）
• 总的来说，redux中间件就是对dispatch()做了个升级
  • 本来原始的dispatch()只能接收对象类型的action，接收以后直接传递给store。但经过redux-thunk中间件升级后，dispatch()可以接收 函数类型的 action，他会执行该函数。（在函数中就可以进行AJAX请求了）
• 这个升级不能放在reducer中，因为reducer是纯函数，具体可参考Redux的reducer为什么不能有异步操作

React-router使用

• 面试考点并不多（前提是熟悉React）
• 每个React Router应用程序的核心应该是路由器组件。
  • 对于Web项目，react-router-dom提供<BrowserRouter>和<HashRouter>路由器。两者之间的主要区别是它们存储URL和与Web服务器通信的方式。
• 路由模式（hash、H5 history），同vue-router
• 路由配置（动态路由、懒加载），同vue-router

路由模式（hash、H5 history）

• hash模式（默认）(HashRouter)使用的是url的hash部分，等于：window.location.hash，如http://abc.com/#/user/10
• H5 history模式(BrowserRouter)，使得页面和浏览器的history保持一致，等于：window.location，如http://abc.com/user/20
• 后者需要server端支持，因此无特殊需求可选择前者
• 对客户端的可用H5 history模式，对后台的可用hash模式
• 如果你使用的是一个非静态的站点、要处理各种不同的url那么你就需要使用BrowserRouter。
• 相反的如果你的server只处理静态的url，那么就使用HashRouter。

路由配置

动态传参

• 例子：
• 补充（前后端传值的例子）：
  • 【react的url中传递参数值】组件的跳转路径上最好使用/:参数值的方法传值，这样组件中可以直接使用this.props.match.params.参数名获取所传参数值。
  • 【react将参数值传递给node】在react的组件的action中通过ajax请求的路径中使用?key=value来传值，这样在node中通过queryString.parse可直接得到JSON对象

跳转路由

• Link组件：
• 用js跳转路由：

懒加载

• 使用React.lazy+React.Suspense:
• 或者使用react-loadable模块