Comments (7)
老师能否介绍一下,如何在reducer 之间共享 state,现在找到的一个方案是使用reduce-reducer库
from 2018.10.
老师能否介绍一下,如何在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()
}
from 2018.10.
异步action的方案,老师在项目中觉得最顺手的是哪个呢,redux-thunk还是redux-saga,saga很强大,但是相对麻烦一点,最近在考虑在项目中要不要上saga
from 2018.10.
异步action的方案,老师在项目中觉得最顺手的是哪个呢,redux-thunk还是redux-saga,saga很强大,但是相对麻烦一点,最近在考虑在项目中要不要上saga
我们现在用的是redux-thunk,但是如你所说redux-saga更强大,至少可以帮我们节约一些模板代码,比如现在我们要引用一堆action,所以我们也在考虑找个项目试用saga
from 2018.10.
【链接】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>
);
}
from 2018.10.
大中型项目多少的打包时间,打包大小才是一个比较合适的状态,有没有关于打包的最佳实践,特别是webpack4的打包规则好像和之前不一样了。
怎么去判断一个项目的打包是合理的,优秀的呢
打包时间 = f(codeLines, packProcesses);
from 2018.10.
老师讲下服务端渲染吧~
核心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 这样的方案
from 2018.10.
Related Issues (20)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from 2018.10.