在create-react-app官方脚手架中引入redux数据管理工具

Z时代
2024-01-10
分类：综合

react

前言：从安装脚手架到引入redux管理数据

直接开始

1.使用npm安装脚手架工具

1）打开命令行，全局安装create-react-app脚手架工具

npm install create-react-app -g

2)选择好项目需要安装的位置进行安装，这里安装在d盘，这个过程事件稍微长一些，因为有很多依赖包需要去安装

执行create-react-app mydemo，这里已经安装成功

3）根据帮助，切换到项目下并运行项目,就会看到官方的脚手架了

cd mydemo

npm start

4）项目结构如下图所示，现在开始引入redux，它起的时一个数据管理的作用，具体的原理可以百度了解一下，推荐阮一峰老师的 Redux 入门教程（三）：React-Redux 的用法

5）安装react，react-redux

声明：redux是数据管理的一个库，理论上和react没有直接联系，我们安装react-redux将他们联系起来

执行npm install --save redux react-redux

+ [email protected]

added 4 packages from 3 contributors and audited 888993 packages in 25.961s

found 0 vulnerabilities

6)安装成功后，我们就可以开始引入了

在这之前我们需要知道数据的流向，下面是我个人的理解：

redux数据管理的话由三部分组成：store，action及reducer，其中store在action与reducer之间起到桥梁的作用，使数据变化能下发到你绑定的组件中去，action是声明变量的，reducer中做数据的逻辑处理，整个流程可以理解为，action中声明创建一个变量，由dispatch方法，将变化的数据传递到action中，由action连接到store，然后到reducer中做处理，存储在state中，通过react-redux中Provider组件对象的store属性，下发到绑定的所有组件中，使用react-redux中的connect连接数据到页面，从state中拿到变化的数据，下面开始具体操作：

新建action.js,声明一个变量，例如：AGE

创建一个reducer.js,函数ageVal就是一个reducer，从redux中使用combinReducers就是将多个reducer函数整合起来为一个rootRducer，一起输出，并给了age一个初始化值为0，可以为任意数

下面可以在入口文件index.js中引入，将状态下发下去了

①首先从react-redux中引入Porvider组件对象，他的作用就是将状态数据下发到其下的每一个组件中

import { Provider } from 'react-redux';

②创建createStore方法去创建一个store数据管理对象进行下发

import { creatStore } from 'redux'

再将合并好的reducer引到首页

createStore(reducer)建立一个state

7）到这里redux引入完成，我们修改一下初始化的age值为18，在页面获取一下看看

在App.js页面中先引入connect，它的作用是将state的状态数据连接到UI组件层面，也就是App.js页面上，使用一个方法getVal来接受状态变化，放在connect（）方法中作为参数，并且我们打印了state如下图所示，我们将state.ageVal数据return到页面上

使用this.props.xx,就可以拿到返回的数据了