P11:Redux总结-三个React新手最容易犯的错误
看到这里Redux
基础部分也就快结束了,但是我有必要单独拿出一篇文章,把平时你容易犯的错误总结一下。本文的知识点你可能都已经知道,也可以省略不看。我总结了三个React新手最容易犯的错误。
store
必须是唯一的,多个store
是坚决不允许,只能有一个store
空间- 只有
store
能改变自己的内容,Reducer
不能改变 Reducer
必须是纯函数
Store
必须是唯一的
现在看TodoList.js
的代码,就可以看到,这里有一个/store/index.js
文件,只在这个文件中用createStore()
方法,声明了一个store,之后整个应用都在使用这个store
。 下面我给出了index.js
内容,可以帮助你更好的回顾。
import { createStore } from 'redux' // 引入createStore方法 import reducer from './reducer' const store = createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) // 创建数据存储仓库 export default store //暴露出去
只有store
能改变自己的内容,Reducer
不能改变
很多新手小伙伴会认为把业务逻辑写在了Reducer
中,那改变state值的一定是Reducer
,其实不然,在Reducer中我们只是作了一个返回,返回到了store
中,并没有作任何改变。我这个在之前的笔记中也着重进行了说明。我们再来复习一下Reducer的代码,来加深印象。
Reudcer
只是返回了更改的数据,但是并没有更改store
中的数据,store
拿到了Reducer
的数据,自己对自己进行了更新。
import {CHANGE_INPUT,ADD_ITEM,DELETE_ITEM} from './actionTypes' const defaultState = { inputValue : 'Write Something', list:[ '早上4点起床,锻炼身体', '中午下班游泳一小时' ] } export default (state = defaultState,action)=>{ if(action.type === CHANGE_INPUT){ let newState = JSON.parse(JSON.stringify(state)) //深度拷贝state newState.inputValue = action.value return newState } //state值只能传递,不能使用 if(action.type === ADD_ITEM ){ //根据type值,编写业务逻辑 let newState = JSON.parse(JSON.stringify(state)) newState.list.push(newState.inputValue) //push新的内容到列表中去 newState.inputValue = '' return newState } if(action.type === DELETE_ITEM ){ //根据type值,编写业务逻辑 let newState = JSON.parse(JSON.stringify(state)) newState.list.splice(action.index,1) //push新的内容到列表中去 return newState } return state }
Reducer
必须是纯函数
纯函数定义:
如果函数的调用参数相同,则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化,必须只依赖于其输入参数。
我们可以简单的理解为返回的结果是由传入的值决定的,而不是其它的东西决定的。比如下面这段Reducer
代码。
export default (state = defaultState,action)=>{ if(action.type === CHANGE_INPUT){ let newState = JSON.parse(JSON.stringify(state)) //深度拷贝state newState.inputValue = action.value return newState } //state值只能传递,不能使用 if(action.type === ADD_ITEM ){ //根据type值,编写业务逻辑 let newState = JSON.parse(JSON.stringify(state)) newState.list.push(newState.inputValue) //push新的内容到列表中去 newState.inputValue = '' return newState } if(action.type === DELETE_ITEM ){ //根据type值,编写业务逻辑 let newState = JSON.parse(JSON.stringify(state)) newState.list.splice(action.index,1) //push新的内容到列表中去 return newState } return state }
它的返回结果,是完全由传入的参数state
和action
决定的,这就是一个纯函数。
这个在实际工作中是如何犯错的?比如在Reducer
里增加一个异步ajax函数,获取一些后端接口数据,然后再返回,这就是不允许的(包括你使用日期函数也是不允许的),因为违反了调用参数相同,返回相同的纯函数规则。
接下来我还会给大家继续讲解Redux
的进阶部分,让大家对Redux
的使用更加精通和深入。
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P11:Redux总结-三个React新手最容易犯的错误
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P11:Redux总结-三个React新手最容易犯的错误