当前位置: 首页 > Web前端 > HTML

十分钟搞懂Redux核心思想,过目不忘

时间:2023-04-02 12:58:13 HTML

Redux是如何用大白话工作的。容易明白。如有错误或疑问,欢迎交流。Redux公约第3章中唯一的数据源(state)虽然redux中的state与react没有任何联系,但可以简单理解为react组件中的this.state。HTML文档只是状态的一种形式。所有的html数据都应该直接或间接来自于状态,否则UI视图会因为状态的变化而无法更新。数据源(状态)是只读的,不应直接修改状态数据。对于数组使用:Array.prototype.slice()//复制数组//使用ES6:[...state,...newState]对于对象使用:Object.assign({},state,change1,change2...)//复制对象//使用ES6:{...state,...newState}通过纯函数(purefunction)改变数据源(state)纯函数:没有其他API(包括Math,Date,等)调用,无异步操作,preState=>newState。Redux数据流简单介绍store/reducer/action,比较简洁,请牢记。storeUI的唯一数据源可以理解为react中的state。商店信息的变化会触发视图更新.action对象。必须有type属性,用来描述发生了什么。可以选择发生时携带数据,比如用户输入的输入值。记住:只用来描述发生了什么。reducerpure函数(如上所述)。React根据action.type,(preState,action)=>newState,生成的state用来改变store。所以,数据流(dataflow):UI发送动作,比如点击,提交;动作,描述发生了什么;reducer处理发生的事情,生成一个新的状态;商店已更新;UI响应storeupdates...Reduxaction举几个例子,它可能更直观:{type:"TOGGLE_TODO",//这个类型属性必须是必需的,必须是一个字符串index:5//附加信息,您可以根据自己的需要选择是否加入};{type:"ADD_TODO",text:"LearningRedux"//附加信息,这里是输入值}没别的,就这么简单。有时候动作生成器(actioncreators)可以用来批量生产相似的动作对象,比如://我需要根据不同的输入值生成高度相似的动作:function(text){return{type:"ADD_TODO",text:text//Additionalinformation}}Explanation虽然是上面说的数据流,但是action只能在reducer处理生成newState后改变store信息。但是为了更好的语义化编程,Redux通过语句store.dispatch(action)来更新store,reducer在内部处理action。reduxreducer很简单(theState,action)=>(newState);//根据action.type处理需要更新的state就可以看到一个比较完整的reducer:functiontodoApp(state=initialState,action){//注意在未定义switch的情况下需要处理状态默认值(action.type){//根据action.type判断case"SET_VISIBILITY_FILTER":returnObject.assign({},state,{visibilityFilter:action.filter})case“ADD_TODO”://处理“ADD_TODO”的动作类型//返回新状态(newState),注意不要直接改变状态,对象使用//Object.assign()。您还可以使用ES的...运算符returnObject.assign({},state,{todos:[...state.todos,{text:action.text,completed:false}]})case“TOGGLE_TODO”://处理“TOGGLE_TODO”的动作类型({},todo,{completed:!todo.completed})}returntodo})})default:returnstate}}ReduxstorestoreUI视图是唯一的数据源(直接或间接),可以获取状态,更新状态,监控状态改变,不听。所以store提供了如下方法:store.getState()获取当前的statestore.dispatch(action)更新statestore.subscribe(listener)store更新后回调listener。在回调函数中,可以调用store.getStore()获取更新后的状态。~取消监听的方式比较特别:再次调用store.subscribe(sameListner)ps:如有错误或疑问,欢迎交流。先写这么多,有时间继续更新。