3-2、React中Redux基础使用。

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

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

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

本文目录

一、回顾MySelectLanApp项目（2-4、React脚手架的使用，以及组件模块构建。）对数据操作的方法；
二、Redux的基础使用；

---

1、回顾MySelectLanApp项目对数据操作的方法：

我们简单快速的回顾下，在（2-4、React脚手架的使用，以及组件模块构建。）中，我们在MySelectLanApp类组件中定义了state，并且在state中有数组languages那这个就是存储着我们添加数据的数组，以及一些操作将数组中的数据删除，那么这个数据是定义在根组件里，要想在子组件中使用，我们是不是用props一层一层的往里面去传值，以Option组件结构画图如下：

可以看到我们在根组件MySelectLanApp定义了数据，以及操作数据的方法，然后一层一层的进行传递，如果组件中嵌套着更多的组件，那么我们对数据的操作将会非常的麻烦，所以我们可以用一个中央的存储数据，哪个组件需要使用到数据，直接取，哪个组件需要对数据进行操作，直接操作，将会大大提高效率。

---

2、Redux的基础使用：

为了解决数据存储以及操作的繁琐和冗余，我们可以可以使用Redux状态管理，如果学过Vue的话，那这个Redux就相当于我们Vue中Vuex。那么这个Redux也是我们React第三方库。今天主要来看看Redux的基础使用。

1. 首先我们打开电脑终端命令行，然后输入命令 cd Desktop ，接着输入命令npx create-react-app redux-demo，接着将redux-demo文件夹拖动vscode编辑器，在编辑器里打开命令行终端，输入命令npm start：
   
   出现以上界面说明我们初始项目创建完成，接着我们删除src文件下的所有默认文件，然后在src文件夹下创建index.js，接着我们再在vscode里再开启一个终端命令，输入命令 npm install redux 安装我们的redux。接着我们在index.js中键入如下代码：

import { createStore } from 'redux'

const store = createStore(() => {
    
})

那么可以看到我们从redux命名引入了createStore，那么createStore 是一个函数，它接收一个参数，这个参数为函数，里面可以写一些初始化的值，（就类似我们之前写的：this.state = { languages: props.languages }），那么这个函数在初始化以及数据发生改变的时候就会触发。
那么在这个函数中去打印888，那么初始化它就会去执行一边，看到控制台：

---

那么我们在const store = createStore((state) => { }) 在这个函数中会传一个state，那么这个state就是上一次的状态，但是刚开始初始化的时候这里面是没有状态的，是一个undefined，控制台：

---

所以我们要将初始化的值写成这样：

const store = createStore((state = {}) => {
    console.log(state)
})

我们用了es6默认赋值，初始化的时候是一个undefined，所以会将空对象赋值给state，这样state就不是一个undefined，在看控制台：

---

接着我们去初始化我们的数据num为 0：

const store = createStore((state = {num: 0}) => {
    return state
})

接着我们去获取这个store里的数据，用到store.getState()这个函数，我们将代码写成如下:

import { createStore } from 'redux'

const store = createStore((state = {num: 0}) => {
    return state
})

console.log(store.getState())

可以看到控制台获取到值：

接着我们去改变这个num的值，我们知道在数据更新的时候会触发这个回调函数，那么我们就可以在数据更新的时候给这个回调函数传一个值，去辨别我们的数据操作，就比如加或者减，那么我们通过如下方法去更新数据：

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

那么通过这个dispatch方法可以让我们的回调函数在走一遍，并且这个type字段是特殊字段，我们输入ADD，代表着加，base为默认一次加10，那么我们怎么在回调函数中去接收呢，然后执行相对应的操作，其实在回调函数中第二个参数action，那这个参数就可以接收dispatch传过来的对象。那么这个就是dispatch触发一个action，代码如下：

import { createStore } from 'redux'

const store = createStore((state = {num: 0}, action) => {
    console.log(action)
    return state
})

console.log(store.getState())

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

那么可以看到控制台打印如下：

那么这个回调函数走了2边，第一边为我们初始化它就会去执行，那么打印出来action为默认值，接着dispatch又会去打印一边，这个时候就会发现将我们传入的对象打印出来了。

最后我们将代码写成如下：

import { createStore } from 'redux'

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

console.log(store.getState())

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

console.log(store.getState())

可以看到我们用了switch语法，判断类型，然后去相对应的操作，可以看到控制台:

如我们预期输出。
接着我们将代码修改成如下，让它也有减的操作，并且执行多次：

import { createStore } from 'redux'

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({
    type: 'ADD',
    base: 10
})

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

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

可以看见我们写了这个函数

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

那这个函数是什么意思呢，相当于每次数据发生改变，都会去触发这个回调函数，在回调函数中我们将每次的值都打印出来了，可以知道我们第一次加10，第二次也加10，第三次还加10，所以应该是10，20，30，最后一次减20，所以又变为10，我们看控制台：

如我们预期，好的以上就是redux的最最基础的使用。在接下来的项目，我们将会使用到。