目录

• axios
• 安装:npm add axios
• 导入axios
• ant-design(国内蚂蚁金服)
• 步骤
• Redux
• 安装 npm install redux
• 三个核心概念
• • 1、action
  • 2、reducer
  • 3、store
• 总结：

axios

安装:npm add axios

npm install axios

导入axios

import axios from "axios";
axios.get("https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312")
.then((res)=>{var data = res.data.dataconsole.log(data)console.log(data.replies)
},(error)=>{console.log('失败了')
})fetch('https://cnodejs.org/api/v1/topics').then(res=>res.json())
.then(res=>{console.log(res.data,'fetch')
}).catch(err=>{console.log('失败了')
})

ant-design(国内蚂蚁金服)

官网: https://ant.design/index-cn
安装:npm install antd --save
antd基本使用(例如在app.js里面使用):

步骤

1. 导入antd组件--Buttonimport {Button} from "antd";
2. 导入antd的css样式import "antd/dist/antd.css";
我是antd里提供的按钮 

Redux

redux 中文文档: http://www.redux.org.cn/

安装 npm install redux

在一个应用中，所有的 state 都是以一个对象树的形式存在一个单一的 store 中，
唯一改变 state 的办法就是触发 action，
而 reducer 就是用来编写专门的函数决定每个 action 如何改变应用的 state 。
reducer的作用是接受旧的 state 和 action,
返回新的 state (previousState, action) => newState

引入createStore，作用就是专门用于创建redux中最为核心的store对象

把这个过程比拟成图书馆的一个流程来帮助理解。

1. Action Creator（具体借书的表达）
   想借书的人向图书馆管理员说明要借的书的那句话。【比如说我要借天龙八部这本书】

2. Store（图书馆管理员）
   负责整个图书馆的管理。是Redux的核心

3. Reducers（图书馆管理员的小本本）
   管理员需要借助Reducer（图书馆管理员的小本本）来记录。

4. React Component（借书的人）
   需要借书的人

组件想要获取State， 用ActionCreator创建了一个请求交给Store,
Store借助Reducer确认了该State的状态
，Reducer返回给Store一个结果，Store再把这个 State 转给组件 。

三个核心概念

1、action

1. 动作的对象a. 本质就是一个Object类型的对象，而Action Creators就是专门用来创建Action了，当然了，我们也可以不使用Action Creators创建Action，完全可以自己去定义个Action对象，就是一个对象【{}】，只要里面包含type和data就可以了。b. action的值其实有两种情况：一是值是一个普通的一般的对象{}，那么这种action就是同步Action二是值是一个函数，那么这种action就是异步action2. 包含2个属性type：标识属性, 值为字符串, 唯一, 必要属性data：数据属性, 值类型任意, 可选属性3. 例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }

2、reducer

1. 用于初始化状态、加工状态。
2. 加工时，根据旧的state和action， 产生新的state的纯函数。
3. 每个组件都应该有自己的reducer，比如说有个组件A，那么组件A想把自己的状态交给redux，那么就需要为组件A构建一个reducer，同理，如果有B组件，也要为B组件构建一个redux。

3、store

1. 整个应该只会有一个，将state、action、reducer联系在一起的对象2. 如何得到此对象?1)import {createStore} from 'redux'2)import reducer from './reducers'3)const store = createStore(reducer)3.此对象的功能?1)getState(): 得到state2)dispatch(action): 分发action, 触发reducer调用, 产生新的state3)subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

总结：

以上就是 React 中 Redux 的详细介绍，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog