一、Redux
- 1、三大核心
- 2、Redux的函数
- 3、store对象提供的方法
- - 举例：利用Redux实现计数器
- 4、在组件(类组件)中使用redux的过程
- 5、Redux使用的缺点
二、React-Recux
- 1、特点
- 2、组成部分
- 3、在类组件的使用
- 4、在函数组件中使用
三、reducer的拆分与合并
- 1、拆分
- 2、合并
四、redux-thunk中间件

一、Redux

Redux：是一个状态管理的库。不是React内置的，是独立的JavaScript的状态容器，提供可预测的状态管理。在React中使用Redux，可以把所有的state集中到组件的顶部，能够灵活地将所有的state分发给所有的组件。方便了开发者管理React中的状态，也方便了不同组件间的通信

1、三大核心

store：是一个数据容器，用来管理和保存整个项目的state。整个项目中只能有一个store
state：是一个对象，在state中存储相应的数据，当开发者需要使用数据时，可以通过store提供的方法来获取state
action：是一个通知命令，用于对state进行修改。通过store提供的方法可以发起一个动作(action)完成对state的修改

2、Redux的函数

(1)action：本质是JavaScript对象，在action中包含一个字符串类型的type属性，作用是指定要对state进行何种操作。
action会通过store将要进行的操作传给reducer函数，由reducer完成对state的修改

action({type:'add',data:''})

(2)reducer：是一个纯函数。有两个参数state和action。该函数一定有一个返回值，是修改后的state。

纯函数：

a、纯函数在执行过程中没有任何的副作用。如定时器、网络请求。
b、如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部状态或数据的变化。

function reducer(state = { count:1},action) {switch(action.type){case 'ADD':return { count:state.count+1 }case 'SUB':return { count:state.count-1 }}        return state;
}

(3)createStore：用于创建store，参数必须是reducer，reducer函数名可以自定义

3、store对象提供的方法

(1)getState：用来获取state

(2)dispatch(action)：派发动作(action)给reducer

(3)subscribe(listener)：会注册一个监听器来监听state的变化。会返回一个注销监听器的方法。 Redux的工作模式：发布-订阅模式

举例：利用Redux实现计数器

【Redux 和 React-Recux】相关推荐

react开发教程（十）redux结合react
描述 Redux 和 React 之间没有关系.Redux 可以搭配 React.Angular 甚至纯 JS.但是 Redux 还是比较适合和 React 搭配的,因为 React 允许你以 sta ...
使用Redux在React Navigation App中管理状态
by Andrea Bizzotto 通过安德里亚·比佐托(Andrea Bizzotto) 使用Redux在React Navigation App中管理状态 (Managing State in ...
像踢球一样玩转Redux和React
引言 React的核心是使用组件定义界面的表现,是一个View层的前端库,简单来说它就是一堆前端组件,view,view,view,重要的事情说三遍. 可是有了组件以后,要怎么组织前端界面的表现呢?怎 ...
Redux 进阶 - react 全家桶学习笔记（二）
注:这篇是17年1月的文章,搬运自本人 blog... https://github.com/BuptStEve/... 零.前言在上一篇中介绍了 Redux 的各项基础 api.接着一步一步地介绍 ...
next.js+react+typescript+antd+antd-mobile+axios+redux+sass react服务端渲染构建项目，从构建到发布，兼容pc+移动端
简介:该教程兼容pc+移动端,如只需一端,可忽略兼容部分教程,根据需要运行的客户端构建项目 antd官网:https://ant.design/components/overview-cn/ antd ...
redux中间件+react高阶组件
1.redux中间件中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程.变为 action -> middlewares -> reducer.这种 ...
使用Typescript的巧妙React上下文技巧-不是Redux
by Bill Girten 比尔·吉尔滕(Bill Girten) 使用Typescript的巧妙React上下文技巧- 不是 Redux (Clever React context tricks ...
如何使用Redux-saga和ReactDnD测试React和Redux（哇！）
by Gregory Beaver 通过格雷戈里·海狸如何使用Redux-saga和ReactDnD测试React和Redux(哇!) (How to test React and Redux wi ...
Flux -- Redux -- Redux React 基础实例教程
本文的目的很简单,介绍Redux相关概念用法及其在React项目中的基本使用假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识一般来说,推 ...
Redux 学习总结 (React)
在 React 的学习和开发中,如果 state (状态)变得复杂时(例如一个状态需要能够在多个 view 中使用和更新),使用 Redux 可以有效地管理 state,使 state tree 结构 ...

【Redux 和 React-Recux】

目录