3-3、React中Redux的action生成器使用，以及初识Reducers。

本节将开启React框架高阶学习第三篇

如果还没有学习 1-1 ~ 1-6 React框架基础的话，建议点我开始React框架基础学习

大家好，我是Counterrr
不忘初心，砥砺前行

本文目录

一、回顾 3-2、React中Redux基础使用 中数据默认值操作，并写成action生成器方式。
二、Reducers的基础使用；

---

1、回顾3-2、React中Redux基础使用中数据默认值操作，并写成action生成器方式。

我们知道我们在这节中。将每次需要修改的方法和默认值都写在了store.dispatch( )函数中，我们在最后再传入一个让数值减10的操作：store.dispatch({ type: 'REDUCE', base: 10})，最后num为0：

那现在我们故意去写错这个type的类型看看：store.dispatch({ type: 'REDUCE1', base: 10})：

那这边也不报错，也不会正确执行，所以我们最好将这个对象写在一个函数中，我们只要最开始去使用这个函数去生成对象，就不用频繁的去写这些类型，是不是不保证我们可能会有写错的一个情况，并且这个还不报错，因为我们使用了switch语句如果没有这个类型的是不是就走了默认值。所以我们这边先把type: 'REDUCE'写成action生成器，代码如下：

const numReduce = ({base = 1} = {}) => ({
    type: 'REDUCE',
    base
})

然后修改store.dispatch( )函数传入action生成器，如下：

// store.dispatch({
//     type: 'REDUCE',
//     base: 20
// })
store.dispatch(numReduce({
    base: 20
}))
// store.dispatch({
//     type: 'REDUCE1',
//     base: 10
// })
store.dispatch(numReduce({
    base: 10
}))

可以看到我们把原来注销的也给写上了，好对比。可以看到这回type类型我们只写一会，然后去调用这个action生成器，这个生成器本质就是函数，接收一个参数（Object），对象的形式我们可以往里面传很多属性。并且如果你这个函数写错了，那是不是就会报错，我们就可以就追踪修改，不像原先无头苍蝇不知道在哪修改，紧接着我们看看numReduce这个action生成器，里面这种写法的含义，其实是用到了es6的解构赋值。首先接受一个参数，这个参数如果没传的话就是undefined，就会走后面的空对象，空对象里去取base属性，如果没有的话就会走默认复制这个时候base就是1。如果传了base，就会走它原本的赋值。好的现在们看下浏览器控制台：

正确解析，接着我们修改最后一个numReduce，我们不要传值，看看会不会走默认赋值：

// store.dispatch({
//     type: 'REDUCE',
//     base: 20
// })
store.dispatch(numReduce({
    base: 20
}))
// store.dispatch({
//     type: 'REDUCE1',
//     base: 10
// })
store.dispatch(numReduce())

如下：

好的也是正常解析，走了默认赋值。接下来我们将所有的操作都生成自己的action生成器，代码如下：

import { createStore } from 'redux'

const numReduce = ({base = 1} = {}) => ({
    type: 'REDUCE',
    base
})
const numAdd = ({base = 1} = {}) => ({
    type: 'ADD',
    base
})
const store = createStore((state = {num: 0}, action) => {
    switch(action.type) {
        case 'ADD':
            return {
                num: state.num + action.base
            }
        case 'REDUCE': 
            return {
                num: state.num - action.base
            }
        default:
            return state
    }
})

store.subscribe(() => {
    console.log(store.getState())
})

// store.dispatch({
//     type: 'ADD',
//     base: 10
// })
store.dispatch(numAdd({
    base: 10
}))

// store.dispatch({
//     type: 'ADD',
//     base: 10
// })
store.dispatch(numAdd({
    base: 10
}))

// store.dispatch({
//     type: 'ADD',
//     base: 10
// })
store.dispatch(numAdd({
    base: 10
}))

// store.dispatch({
//     type: 'REDUCE',
//     base: 20
// })
store.dispatch(numReduce({
    base: 20
}))

// store.dispatch({
//     type: 'REDUCE1',
//     base: 10
// })
store.dispatch(numReduce())

好的，我们在看下控制台：

一切正常，以后我们就可以写成这种action生成器的写法了，更利于维护。

---

2、Reducers的基础使用：

其实在之前我们已经使用过Reducers，就是我们之前使用的createStore( )这个函数，那Reducers其实就是处理数据更改响应的状态，那可以看到我们上面写的demo，Reducers只跟踪了一个数据状态，那如果我们写的项目很大，数据状态肯定不止一个，那么就要用到多个数据，不可能将所有的数据写在一个Reducers里，像Vue它跟踪状态的时候是模块化的跟踪，那么我们在React里就可以写多个Reducers。
那么Reducers有两个特点：

• 它是一个纯函数，即输出的值只跟输入的值有关；
• 传入的state，action只能不读取，不能直接改变，

好的，现在我们把上面的demo处理成一个Reducers，如下：

import { createStore } from 'redux'

const numReduce = ({base = 1} = {}) => ({
    type: 'REDUCE',
    base
})
const numAdd = ({base = 1} = {}) => ({
    type: 'ADD',
    base
})
//num的Reducer
const numReducer = (state = {num: 0}, action) => {
    switch(action.type) {
        case 'ADD':
            return {
                num: state.num + action.base
            }
        case 'REDUCE': 
            return {
                num: state.num - action.base
            }
        default:
            return state
    }
}
const store = createStore(numReducer)

store.subscribe(() => {
    console.log(store.getState())
})

// store.dispatch({
//     type: 'ADD',
//     base: 10
// })
store.dispatch(numAdd({
    base: 10
}))

// store.dispatch({
//     type: 'ADD',
//     base: 10
// })
store.dispatch(numAdd({
    base: 10
}))

// store.dispatch({
//     type: 'ADD',
//     base: 10
// })
store.dispatch(numAdd({
    base: 10
}))

// store.dispatch({
//     type: 'REDUCE',
//     base: 20
// })
store.dispatch(numReduce({
    base: 20
}))

// store.dispatch({
//     type: 'REDUCE1',
//     base: 10
// })
store.dispatch(numReduce())

那么我们这样处理一个数据一个numReducer，这样的在项目大的情况下，就可以更好的跟踪和维护了，让数据也有模块化的概念。

---

好的我们现在再来写一个复杂点的数据，练习下Reducers，我们先将src文件夹下的index.js重命名为index1.js，然后新建一个index.js文件。在index.js中键入如下代码：

import { createStore, combineReducers } from 'redux'

// 各国疫情数据
const esNum = [
    {
        country: 'USA',
        esNumber: 1000000
    },
    {
        country: 'Japan',
        esNumber: 100000
    }
]
// 疫情数据排序
const filter = {
    sortByNum: 'esNumber'
}

// 处理疫情数据的reducer
const esNumHandler = (state = esNum, action) => {
    switch(action.type) {
        default:
            return state
    }
}

// 处理疫情数据排序的reducer
const filterHandler = (state = filter, action) => {
    switch(action.type) {
        default:
            return state
    }
}

//结合两个reducer数据用到combineReducers方法
const store = createStore(combineReducers({
    esNum: esNumHandler,
    filter: filterHandler
}))

console.log(store.getState())

在这里举例了疫情数据，那这个疫情的话用了两个reducer，就比如疫情的数据，以及疫情的数据操作，就比如根据数量排序，那么combineReducers方法就是将reducer合并起来，我们可以看到控制台：

这样的话，我们维护数据更好维护，就比如要去增加疫情数据，就可以去esNumHandler reducer里去根据action生成器去修改。那如果要处理排序之类的就可以去filterHandler reducer里去根据action生成器去修改。这样的话我们开发一个项目，数据的操作和维护更加的简洁高效。