每天一点面试题（13）------redux-trunk

react和jq一起用有什么问题

1. 由于react 每次调用render时dom结构都会被重新绘制，因为jQuery是方便操作的DOM的库，当jQuery和REACT同时对DOM进行操作时jQuery会出现各种问题，如果实际情况需要操作DOM ，那么在shouldComponentUpdate函数中返回false
2. 如果外部的DOM不是React组建的，那么React没法去管理。
3. 第一，思想不一样。react是基于数据驱动的， 也就是说数据决定dom。 因此如果使用jquery的思想直接操作DOM的话，违背了这个思想。第二，两者共存可能会有意想不到的问题。 假定有这么一种场景：react的A组件,function A(props) {    return 
   <div id=“jq”>我会被jquery操作
   {props.count}}A组件props现在是{count: 1}， 然后你使用jq将id为jq的元素修改了。 然后props变为{count: 2}, react重新渲染，你会发现id为jq的元素恢复到以前的状态了。解决方式拆一个jq组件出来，并使用shouldComponentUpdate 返回false， 将组件变成不会更新的组件因此不建议在react等数据驱动的框架中做dom操作。

redux-trunk的作用

redux-thunk 是一个比较流行的 redux 异步 action 中间件，比如 action 中有 setTimeout 或者通过 fetch通用远程 API 这些场景，那么久应该使用 redux-thunk 了。redux-thunk 帮助你统一了异步和同步 action 的调用方式，把异步过程放在 action 级别解决，对 component 没有影响。下面通过例子一步步来看看。

异步方法的调用

store.dispatch({
    type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
   
  store.dispatch({
    type: 'HIDE_NOTIFICATION' })
}, 5000)

这是一个简单的例子，他做事情很简单，5s 后关闭提醒。

在一个被 redux connect 过的 component 中，是如下这个样子：

this.props.dispatch({
    type: 'SHOW_NOTIFICATION', text: 'You logged in.' })
setTimeout(() => {
   
  this.props.dispatch({
    type: 'HIDE_NOTIFICATION' })
}, 5000)

本质上两者没有区别，只是被 connect 过的 component 中的 this.props 有了 dispatch 属性。

我们为了在不同 component 中重用创建 action 的代码，会把他放到一个 action 的 JS 文件中。

// actions.js
export function showNotification(text) {
   
  return {
    type: 'SHOW_NOTIFICATION', text }
}
export function hideNotification() {
   
  return {
    type: 'HIDE_NOTIFICATION' }
}

// component.js
import {
    showNotification