React学习笔记--通过Redux 的三个基本原则来理解Redux
####澄清一个事实 为什么需要Redux前后端分离的思潮越来越浓烈以及单页应用开发日趋复杂,前端JavaScript 需要管理越来越多的应用状态(state)。 这里的应用状态可能包括: Redux的三大原则单一数据源整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。这让同构应用(同构应用通俗的理解:前后端使用同一语言或技术进行开发)开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ,调试也变得非常容易。在开发中,通常将应用的 state 保存在本地,从而加快开发速度。 console.log(store.getState())
/* Prints { visibilityFilter: 'SHOW_ALL',todos: [ { text: 'Consider using Redux',completed: true,},{ text: 'Keep all state in a single tree',completed: false } ] } */
State 是只读的state的改变只能通过触发特定的action完成(action 是一个用于描述已发生事件的普通对象)。这样设计的好处在于,确保了视图和网络请求都不能直接修改 state,相反它们只能表达想要修改的意图。因为所有的修改都被集中化处理,且严格按照一个接一个的顺序执行,因此不用担心 race condition 的出现。 Action 就是普通对象而已。同时通过这样的设计开发后期调试或测试时对于复现问题。 store.dispatch({
type: 'COMPLETE_TODO',index: 1
});
store.dispatch({
type: 'SET_VISIBILITY_FILTER',filter: 'SHOW_COMPLETED'
});
使用纯函数来执行修改为了可控的,详细的描述 action 如何改变 state tree ,需要开发人员自己完成 reducers 的编写工作。 function visibilityFilter(state = 'SHOW_ALL',action) {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
function todos(state = [],action) {
switch (action.type) {
case 'ADD_TODO':
return [
...state,{
text: action.text,completed: false
}
]
case 'COMPLETE_TODO':
return state.map((todo,index) => {
if (index === action.index) {
return Object.assign({},todo,{
completed: true
})
}
return todo
})
default:
return state
}
}
import { combineReducers,createStore } from 'redux';
let reducer = combineReducers({ visibilityFilter,todos });
let store = createStore(reducer);
总结通过上面三个原则的理解学习,我们知道。想要开发一个设计良好的React应用,需要对业务逻辑又一个良好的感知与理解,这样便于在项目初期就构建好 object tree, 明确数据流向。有效的划分每一个 state , action,reducer。达到事半功倍的作用。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |