axios使用

axios

安装:npm add axios

导入axios

import axios from "axios";
axios.get("https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312")
.then((res)=>{
    var data = res.data.data
    console.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组件--Button
    import {Button} from "antd";
2. 导入antd的css样式
    import "antd/dist/antd.css";
<Button type="primary">我是antd里提供的按钮</Button> <br/>

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就是异步action
​
2. 包含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(): 得到state
        2)dispatch(action): 分发action, 触发reducer调用, 产生新的state
        3)subscribe(listener): 注册监听, 当产生了新的state时, 自动调用