Open zhulin2609 opened 5 years ago
老师能否介绍一下,如何在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()
}
异步action的方案,老师在项目中觉得最顺手的是哪个呢,redux-thunk还是redux-saga,saga很强大,但是相对麻烦一点,最近在考虑在项目中要不要上saga
异步action的方案,老师在项目中觉得最顺手的是哪个呢,redux-thunk还是redux-saga,saga很强大,但是相对麻烦一点,最近在考虑在项目中要不要上saga
我们现在用的是redux-thunk,但是如你所说redux-saga更强大,至少可以帮我们节约一些模板代码,比如现在我们要引用一堆action,所以我们也在考虑找个项目试用saga
【链接】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>
);
}
大中型项目多少的打包时间,打包大小才是一个比较合适的状态,有没有关于打包的最佳实践,特别是webpack4的打包规则好像和之前不一样了。 怎么去判断一个项目的打包是合理的,优秀的呢
打包时间 = f(codeLines, packProcesses);
老师讲下服务端渲染吧~
核心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 这样的方案
老师能否介绍一下,如何在reducer 之间共享 state,现在找到的一个方案是使用reduce-reducer库