redux入门

女爷i 2021-12-03 07:39 290阅读 0赞

# 初识redux #

## 什么是redux ##

Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件(通过props)，由于这个特征，两个非父子关系的组件（或者称作兄弟组件）之间的通信就比较麻烦。

## redux中各对象的说明 ##

### store ###

store是一个数据仓库，一个应用中store是唯一的，它里面封装了state状态，当用户想访问state的时候，只能通过store.getState来取得state对象，而取得的对象是一个store的快照，这样就把store对象保护起来。

### action ###

action，描述了一个更新state的动作，是一个对象，它的属性有：

*  `type` - 一个简单的字符串常量，例如ADD, UPDATE, DELETE等。
 *  `payload` - 用于更新状态的数据。

其中type属性是必须有的，它指定了某动作和要修改的值：

{ type: UPDATE_TITLE_COLOR, payload: 'green'}

### actionCreator ###

如果每次派发动作时都写上长长的action对象不是很方便，而actionCreator就是创建action对象的一个方法，调用这个方法就能返回一个action对象，用于简化代码。

### dispatch ###

dispatch是一个方法，它用于派发一个动作action，这是唯一的一个能够修改state的方法，它内部会调用reducer来调用不同的逻辑基于旧的state来更新出一个新的state。

### reducer ###

reducer是更新state的核心，它里面封装了更新state的逻辑，reducer由外界提供（封装业务逻辑，在createStore时传入），并传入旧state对象和action，将新值更新到旧的state对象上返回。

redux安装：

create-react-app redux-shopping-cart //创建react项目并安装redux cd redux-shopping-cart yarn add redux # 或者npm install redux

转载于:https://www.cnblogs.com/sherrycat/p/11152900.html

发表评论取消回复

表情：

评论列表（有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读

相关 reactjs教程：安装Redux库及Redux入门示例

首先，需要安装Redux库并导入所需的函数和常量： // 安装Redux：npm install redux import { c

比眉伴天荒/ 2024年02月17日 13:16/ 0 赞/ 4 阅读

相关 Redux入门笔记

附上阮一峰大神教程传送门： [http://www.ruanyifeng.com/blog/2016/09/redux\_tutorial\_part\_one\_basi

古城微笑少年丶/ 2022年06月13日 11:14/ 0 赞/ 232 阅读

相关 Redux之react-redux简单项目入门

一：效果图 ![70][] 二：目录结构注意：已经安装了react官方脚手架（进行修改） ![70 1][] 三：相关代码

一时失言乱红尘/ 2022年05月20日 02:05/ 0 赞/ 208 阅读

相关 REDUX入门

redux基础教程阅读本文之前，你需要掌握一些基本的react知识，和node的基本环境。什么是redux? 简单来说，redux就是

朴灿烈づ我的快乐病毒、/ 2022年05月19日 09:44/ 0 赞/ 222 阅读

相关 redux入门

初识redux 什么是redux Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。在React中，数据在组件中是单向流动的，数据

女爷i/ 2021年12月03日 07:39/ 0 赞/ 291 阅读

相关 react-redux入门

文章目录概念 Provider connect mapStateToProps 参数 st

系统管理员/ 2021年11月18日 00:04/ 0 赞/ 352 阅读

相关 Redux入门

文章目录概念工作流程 Action Reducer store store的创建概念 React作为

快来打我*/ 2021年11月17日 10:26/ 0 赞/ 351 阅读

相关 Redux 入门教程—14异步和 redux-thunk

我们在项目经常要发送ajax，处理异步等，这个也可以使用中间件第一步：安装 ![2019081311113789.png][] 第二步：使用 ![watermark

小灰灰/ 2021年11月02日 09:12/ 0 赞/ 382 阅读

相关 Redux 入门教程—13redux-logger

现在我们可以使用别人写好的中间件，这节使用一个关于打印日志的中间件redux-logger 如何使用？第一步：安装 ![20190813105258526.png][]

ゝ一世哀愁。/ 2021年11月02日 09:08/ 0 赞/ 578 阅读

相关 redux入门实例

安装 npm install --save redux npm install --save react-redux npm install --save-dev red...

红太狼/ 2021年04月13日 17:29/ 0 赞/ 579 阅读