第十二节课问题收集

[zhulin2609]

No description provided.

[ZhangLynn]

老师能否介绍一下，如何在reducer 之间共享 state，现在找到的一个方案是使用reduce-reducer库

[zhulin2609]

老师能否介绍一下，如何在reducer 之间共享 state，现在找到的一个方案是使用reduce-reducer库

首先这是一种所谓的redux反模式
一般如果真的用到了外部数据，我们更多地是把其他的reducer字段以参数的形式，挂载到action.ext.xxx传进来。那么action.ext又是怎么拿到的呢？类似下面的代码

// action1.js

export function setUserStatus(name) {
   return {
            types: [REQUEST, REQUEST_SUCCESS, REQUEST_FAIL],
            data: {
                from_id: querystring.fromid
            },
            url: `/api-test/xxx`,
            type: 'get',
            ext: {
                    name
            }
        }
    }
}

export function userState(state) {
    return (dispatch,getState)=>{

        // 获得其他reducer中的字段
        let {name} = getState().reducer2;

        dispatch(setUserStatus(name));

    }
}

// reducer1.js

import {
    REQUEST, REQUEST_SUCCESS, REQUEST_FAIL
} from '../action/action1';

function appStatus (state = {}, action) {
    switch (action.type) {        
        case REQUEST_SUCCESS:
            let name = action.ext.name
            return action.status;
        default:
            return state;
    }
}

export default appStatus;

比如对列表某项的增删改查，我可能要获取这条数据的数据，就是说把这条数据放到增删改查的action的payload类似字段里面对么

// action.js
export function curdItemAPI(item_data) {
   return {
            types: [REQUEST, REQUEST_SUCCESS, REQUEST_FAIL],
            data: {
                item_data
            },
            url: `/api/curdItem`,
            type: 'post'
        }
    }
}

export function curdItem() {
    return (dispatch,getState)=>{

        // 获得其他reducer中的字段
        let {item_data} = getState().reducer2;

        dispatch(curdItemAPI(item_data));

    }
}

// component.js

import {curdItem} from '../action.js'

componentDidMount() {
    curdItem()
}

[ZhangLynn]

异步action的方案，老师在项目中觉得最顺手的是哪个呢，redux-thunk还是redux-saga，saga很强大，但是相对麻烦一点，最近在考虑在项目中要不要上saga

[zhulin2609]

异步action的方案，老师在项目中觉得最顺手的是哪个呢，redux-thunk还是redux-saga，saga很强大，但是相对麻烦一点，最近在考虑在项目中要不要上saga

我们现在用的是redux-thunk，但是如你所说redux-saga更强大，至少可以帮我们节约一些模板代码，比如现在我们要引用一堆action，所以我们也在考虑找个项目试用saga

[zhulin2609]

【链接】RenderProps-React
https://react.docschina.org/docs/render-props.html

render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
        {props.flag ? <Cat mouse={this.state} /> : <Dog mouse={this.state} />}
        
      </div>
    );
  }

[zhulin2609]

大中型项目多少的打包时间，打包大小才是一个比较合适的状态，有没有关于打包的最佳实践，特别是webpack4的打包规则好像和之前不一样了。
怎么去判断一个项目的打包是合理的，优秀的呢

打包时间 = f(codeLines, packProcesses);

[zhulin2609]

老师讲下服务端渲染吧~

核心api: renderToString

考虑到react ssr一般都是同构的方案，但是服务端是没有浏览器的api的，所以在组件的constructor, render等方法中不能出现浏览器的api。

如何在服务端处理浏览器api？
参照axios做个工具库，在打包的时候分别构建浏览器和服务端所需要的不用的api，使用

Object.defineProperties(global, {
        document: {
            get: function() {
                if (process.domain && process.domain.document) {
                    return process.domain.document
                } else {
                    return undefined
                }
            }
        }
})

做兜底

利用https://nodejs.org/dist/latest-v11.x/docs/api/domain.html 做请求级的用户上下文环境

或者直接使用https://github.com/zeit/next.js 这样的方案