写一个项目所需要的基本架构组成
我们写项目完全可以按照这个模式去使用自己有拓展的地方在去增加
说明: 本解决方案为Hooks
加Redux
加Router
来构建项目的整体架构
基础包
我们使用脚手架生成React项目后 内置了React的基础包我们还需要按照一些
自带的包
|
需安装的包
- react-router-dom 路由
- redux 状态管理
- react-redux React 专用状态管理的库
- redux-thunk 使用
thunk
等中间件可以帮助在 Redux 应用中实现异步性
后面我们需要什么再进行安装 基础搭建这些就够了
开始
我们使用脚手架 create-react-app
生成项目后我们将没有用的东西进行删除
留下来的目录和文件
|
我们首先配置 react-redux
状态管理也就是数据管理
react-redux
通过官方文档我们知道react-redux是react官方用来绑定redux的。
我们将Provider放在最上层让redux的store在任何组件里都是可用的。
然后使用connect()函数来链接react的组件和redux的store。
在没有Provider的情况下不能单独使用connect();
我们在 index.js
文件中进行引入 后进行配置
|
从上段代码可以看出我们还没创建 store
文件 这个文件是干什么用的呢?
store
:里面存着数据状态的和 中间件 redux-thunk
的配置
我们来创建这个文件夹 在src
中我们创建一个文件夹名字为store
里面在分别创建两个文件夹 分别为action
,reducers
reducers
: 来存放我们的数据 (我们需要有一个根的文件然后将其他的数据合并为一个state)
action
: 来进行数据的操作
我们在store
文件夹下创建一个 index.js
来进行配置
我们最终创建的 store
文件夹为
|
reducers
归总的文件是将 数据一和数据二或者更多 统一成一个 然后导出一个对象给store
下的index.js
action
里面是对数据进行处理的也就是逻辑调用 数据定义的方法
然后就是我们 store
下的index.js
|
redux-thunk
中间件在这里进行一个异步的处理
中间就是在action与reducer之间又加了一层,没有中间件的Redux的过程是:action -> reducer
,而有了中间件的过程就是action -> middleware -> reducer
,使用中间件我们可以对action也就是对dispatch方法进行装饰,我们可以用它来实现异步action、打印日志、错误报告等功能
combineReducers
用于 Reducer 的拆分。
你只要定义各个子 Reducer 函数,(也就是我们上面 reducers
文件夹里面的东西) 然后用这个方法,将它们合成一个大的 Reducer。
reducers文件夹
我们如何进行编写呢?为一个纯函数并且接收两个参数 state
自定义的数据,action
传递的参数
|
我们 需要在 函数体中进行处理 我们通过传递 Type
来判断是什么操作进行数据的改变
action文件夹
我们可以在这个文件中配置 axios
进行一个ajax请求配置
我们创建一个http
文件
|
然后我们导入进行 别的文件就可以使用 ajax
了
我们创建一个文件来对数据的操作 创建一个 getLecturer.js
来呼应上我们上面在reducers
文件夹中创建的 lecturers.js
文件
|
我们将数据管理配置完成了下一步我们来配置路由
react-router-dom
我们在App.js
文件中进行引入 路由模块
|
Route 组件
组件可以需要接收 path
路经 component
和 render
二选一 都是渲染组件使用
使用 render
可以方便地进行内联渲染和包装,而无需进行上文解释的不必要的组件重装。
你可以传入一个函数,以在位置匹配时调用,而不是使用 component
创建一个新的 React 元素。
render
渲染方式接收所有与 component
方式相同的 route props。
|
警告:
<Route component>
优先于<Route render>
,因此不要在同一个<Route>
中同时使用两者。
创建组件
我们创建一个 组件 (这里你可以进行分文件夹)看你怎么方便这里只做演示组件内的数据管理怎么操作
|
我们在组件中导入 react-redux
然后我们进行配置 connect
我们导出的时候是将我们编写的 函数组件传递给 connect
|
上面我们为什么 返回了 props.index
因为 props 中有很多数据 我们只要需要的数据(还记得我们上面reducers 文件夹吗) 这里返回的是一个新对象
此解决方案为React 16.8 以后的版本 存在了Hooks 后的解决方案 不知道对不对 很多老项目还都是class 所以class 还是要学的!