React 中 Redux 详解

2023-01-08 134

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： React 中 Redux 详解

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.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对象

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

Action Creator（具体借书的表达）

想借书的人向图书馆管理员说明要借的书的那句话。【比如说我要借天龙八部这本书】

Store（图书馆管理员）

负责整个图书馆的管理。是Redux的核心

Reducers（图书馆管理员的小本本）

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

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时, 自动调用

总结：

以上就是 React 中 Redux 的详细介绍，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。