P11:Redux总结三个最容易犯的错误

Posted wgchen~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了P11:Redux总结三个最容易犯的错误相关的知识,希望对你有一定的参考价值。

阐述

看到这里Redux基础部分也就快结束了,但是我有必要单独拿出一篇文章,把平时你容易犯的错误总结一下。本文的知识点你可能都已经知道,也可以省略不看。

我总结了三个React新手最容易犯的错误。

1、store必须是唯一的,多个store是坚决不允许,只能有一个store空间

2、只有store能改变自己的内容,Reducer不能改变

3、Reducer必须是纯函数

Store必须是唯一的

现在看 TodoList.js 的代码,就可以看到,这里有一个 /store/index.js 文件,只在这个文件中用 createStore() 方法,声明了一个 store,之后整个应用都在使用这个 store。 下面给出了index.js内容,可以帮助你更好的回顾。

demo01\\src\\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的数据,自己对自己进行了更新。

demo01\\src\\store\\reducer.js

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的使用更加精通和深入。

以上是关于P11:Redux总结三个最容易犯的错误的主要内容,如果未能解决你的问题,请参考以下文章

小白学PYTHON时最容易犯的6个错误

小白学PYTHON时最容易犯的6个错误,看看你遇到过几个

日常工作中最容易犯的几个并发错误,你中了几个?

自动化测试人员最容易犯的9个错误,最后一个大多数人都会....

Java初学者容易犯的代码错误

写 Java 程序最容易犯的 21 种错误实例分析