本节将开启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的基础使用。
- 首先我们打开电脑终端命令行，然后输入命令
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的最最基础的使用。在接下来的项目，我们将会使用到。