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

╰+哭是因爲堅強的太久メ 2023-10-06 20:54 51阅读 0赞

#### Redux 基础 ####

*  阐述
 *  Store必须是唯一的
 *   *  只有store能改变自己的内容，Reducer不能改变
     *  Reducer 必须是纯函数

## 阐述 ##

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