04. 状态管理
状态管理
记得上次面试的时候,有人问我怎么看待全栈开发这个概念,笔者一直觉得,对于小团队与较简单的业务逻辑,全栈可以极大地提高产品开发效率。但是所谓磨刀不误砍柴工,随着对性能、清晰可维护的代码架构的需求日渐提升,类似于
What is State? | 何谓状态
一言以蔽之,状态就是你应用中流动的数据。在工程师们提出了 State
这个概念之后,每个人都对它有自己独特的理解,特别是随着
实际上,任何应用中都不会只存在某种单一的状态,状态以不同的形式出现在应用的不同层级,我们首先要做的就是搞清楚应该如何区分这些状态,并且应该如何因地制宜地处理这些状态。
很多的开发者初期会多使用本地状态,即把数据存放在组件本身,那么在业务逻辑演化地过程中,不可避免地会导致应用的复杂度增加。以评论组件为例,如果我们需要将数据从

Domain State | 服务端状态
// Lets say we want to know the state of our friends list at any given time
// Lets make aGraphQL query to represent this:
user(id: "1") {
name
friends {
name
}
}
在queries
来获取
{
"data": {
"user": {
"name": "Abhi Aiyer",
"friends": [
{
"name": "Ben Strahan"
},
{
"name": "Sashko Stubailo"
}
]
}
}
}
如果我们需要获取更多的领域信息:
jobs(id: "32hkrv32ZKjd3jlwzhk") {
description,
position,
wage {
max
},
managers {
name,
email
},
status,
published
}
这里我们从
{
"data": {
"jobs": {
"description": "Write cool blog posts",
"position": "Programmer",
"wage": {
"max": 24
},
"managers": [
{
"name": "Larry",
"email": "larry@stooges.com"
},
{
"name": "Moe",
"email": "moe@stooges.com"
}
],
"status": "PUBLISHED",
"publishedAt": 1460294879
}
}
}
UI State
function visibilityOfButton(state = false, action = {}) {
switch (action.type) {
case "TOGGLE_VISIBILITY": // return opposite of the current state
return !state;
default:
return state;
}
}
function inputFromUser(state = {}, action) {
switch (action.type) {
case "UPDATE_DATA": // return a new object that has data from the action
return { ...state, ...action.data };
default:
return state;
}
}
在
{
visibilityOfButton: false,
inputFromUser: {}
}
当用户点击按钮之后,产生的
// Redux utilizes a command like pattern.
// Our Store represents the receiver here
// the dispatch represents the executor
// the object passed to the dispathcer is the command
Store.dispatch({
type: "TOGGLE_VISIBILITY",
});
("REVIOUS STATE: { visibilityOfButton: false, inputFromUser: {} }");
('ACTION -> type: "TOGGLE_VISIBILITY"');
("NEXT STATE: { visibilityOfButton: true, inputFromUser: {} }");