正文

react之redux的学习笔记

吃草的虾米  吃草的虾米  2022-09-01  217

关键词：

数据流：

1.数据流是我们的行为与响应的抽象

2.使用数据流帮助我们明确了行为对应的响应

redux执行流程：

1.将要改的值传给action

2.在action中编写state的变化，利用store的dispatch方法来传递数据的变化

3.reducer处理action并返回新的state值(纯函数)

3.将值传递给store（它是整个应用保存state的redux对象,store是state+reducer的混合体）

redux的设计思想：web应用是一个状态机，视图与状态是一一对应的；所有的状态，保存在一个对象里面

redux是JavaScript的状态容器，它提供了可预测的状态管理。redux和react之间并没有特别的关系，不管你使用的是什么框架，redux都可以作为一个状态管理器应用到这些框架上

主流的数据框架：Flux （单向数据量，比较重大，实用性不强） reFlux(简单单一状态树)

redux (简单单一状态树非常小压缩后大概2k)

mvc

model: 数据

view: 显示

controller: 管理（action）

上图的讲解：当我们一个界面渲染完之后，当用户做操作时会触发actions，action会被送到reducer方法里，然后reducer去更新store，state算是store的一部分，它的变化会引起界面的变化

npm install react-redux redux

store：是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个store（唯一性）

state:对象包含所有数据。如果想得到某个时点的数据，就要对store生成快照。这种时点的数据集合，就叫做state。redux规定，一个state对应一个view。只要state相同，view就相同，反之亦然。

action:state的变化，会导致view的变化。但是，用户接触不到state，只能接触到view。所以，state的变化必须是view导致的。action就是view发出的通知。表示state应该要发生变化了。Action是一个对象。其中的type属性是必须的，表示Action的名称。

action creator：view要发送多少种消息，就会有多少种action。如果都手写，会很麻烦。可以定义一个函数来生成action，这个函数叫 action creator

store.dispatch():是view发出action的唯一方法

reducer:store收到action以后，必须给出一个新的state，这样view才会发生变化。reducer是一个函数，它接受action和当前state作为参数，返回一个新的state

实际应用中，reducer函数不用手动调用，store.dispatch方法会触发Reducer的自动执行。为此，store需要知道Reducer函数，做法就是在生成Store的时候，将Reducer传入createStore方法

import { createStore } from 'redux';
const store = createStore(reducer);

createStore接受Reducer作为参数，生成一个新的Store。以后每当store.dispatch发送过来一个新的Action，就会自动调用Reducer，得到新的State

纯函数：只要是同样的输入，必定得到同样的输出。reducer函数重要的特征

　　纯函数必须遵守的约束：不得改写参数，不能调用系统I/O的API，不能调用Date.now()或Math.random()等不纯的方法，因为每次会得到不一样的结果

Reducer是纯函数，就可以保证同样的State，必定得到同样的View。但也正因为这一点，Reducer函数里面不能改变State，必须返回一个全新的对象。

reducer：

是响应的抽象

是纯方法

传入旧状态和action，返回新状态

store.subscribe():Store允许使用store.subscribe方法设置监听函数，一旦State发生变化，就自动执行这个函数。它返回一个函数，调用这个函数就可以解除监听（unsubscribe()）

Redux提供了一个 combineReducers方法，用于Reducer的拆分。你只要定义各个子Reducer函数，然后用这个方法，将它们合成一个大的Reducer。这种写法有一个前提，就是State的属性名必须与子Reducer同名。如果不同名，就要采用下面的写法

const reducer = combineReducers({
  a: doSomethingWithA,
  b: processB,
  c: c
})

// 等同于
function reducer(state = {}, action) {
  return {
    a: doSomethingWithA(state.a, action),
    b: processB(state.b, action),
    c: c(state.c, action)
  }
}

combineReducers：redux提供的，作用是把放在各处的reducer合并到一起

import todos from "./todos"
import visibility from "./visibility"
import {combineReducers}  from "redux"

const todoApp = combineReducers({todos,visibility })

export default todoApp

Reducer异步操作的中间件(middleware)

applyMiddlewares()是Redux的原生方法，作用是将所有中间件组成一个数组，依次执行

redux三大原则：

　　1.整个应用只有唯一一个可信数据源，也就是只有一个store

　　2.state只能通过触发action来更改

　　3.state的更改必须写成纯函数，也就是每次更改总是返回一个新的state，在redux里这种函数称为reducer

redux文档：

http://redux.js.org

http://cn.redux.js.org

react+redux学习笔记：react+redux简易开发步骤

...据和业务逻辑，支持所有ReduxAPI，参考之前的文章：Redux学习笔记：Redux简易开发步骤而React+Redux是以上两部分结合起来，方便在React中使用Redux，专用库为React-Redux.js。React-Redux.js新增了一些新方法：查看详情

react学习笔记总结(代码片段)

文章目录1.redux介绍2.redux工作流程3.redux的使用4.redux完整结构补充5.redux的异步action6.react-redux库与redux库7.react-redux库的实战8.react-redux的connect最精简写法9.react-redux的Provider组件作用10.react-redux整合UI组件和容器组件11.redux的combineReduce... 查看详情

redux-form的学习笔记

...了5580颗star和654颗的fork数，今天就写一下我的redux-form的学习笔记吧左转redux-form的api文档地址：http://redux-form.com/ 查看详情

redux-form的学习笔记

...了5580颗star和654颗的fork数，今天就写一下我的redux-form的学习笔记吧左转redux-form的api文档地址：http://redux-form.com/ 查看详情

正式学习react----redux源码分析

今天看了下Redux的源码，竟然出奇的简单，好吧。简单翻译做下笔记：喜欢的同学自己可以去github上看：点这里createStore.js 1importisPlainObjectfrom‘lodash/isPlainObject‘2import$$observablefrom‘symbol-observable‘34/**5*Theseareprivateactiontypesres 查看详情

react学习笔记之环境配置

　　　今天开始学习react环境配置，首先我们知道目前主流框架有三个，即:angular,react,vue,每个框架都有大量粉丝在用，并且每个框架都有自己的一套开发环境和提供的脚手架，今天我们学习一下react环境配置，为后续课程学习打... 查看详情

react.js学习笔记之事件系统

事件系统React标准化了事件对象，因此在不同的浏览器中都会有相同的属性。组件createClass后创建的是许多方法组成的对象。组件中使用的方法分为React自有的方法与用户定义的方法。其中React自有方法是组件生命周期中的方法，... 查看详情

react学习笔记总结(代码片段)

文章目录1.React之props的使用2.React之对props进行限制3.React之props只读(知道修改在这是什么效果！)4.React之props简写方式5.类式组件中的构造器与props的注意事项6.函数式组件使用props7.类式组件字符串形式的refs属性8.React之回调形... 查看详情

react学习笔记总结(代码片段)

react-native之redux与react-redux(代码片段)

...会有所偏差，欢迎朋友们联系我讨论。文中所有内容仅供学习交流之用，不可用于商业用途，如因此引起的相关法律法规责任，与我无关，如文中内容对您造成不便，烦请联系277511806@qq.com处理，谢谢。转载麻烦注明出处，谢谢... 查看详情

react-native之redux与react-redux(代码片段)

react学习笔记总结(代码片段)

针对React拓展相关的学习。文章目录一.React项目打包二.React扩展之setState两种写法三.React扩展之lazyLoad(懒加载)四、React的stateHook五、React的EffectHook六、React的RefHook七、React的Fragment八、React的Context九、React的PureComponent1.Component组件... 查看详情

react入门学习（十五）--react-redux基本使用(代码片段)

...小丞同学，一名大二的前端爱好者📢这篇文章是学习React-Redux的学习笔记📢非常感谢你的阅读，不对的地方欢迎指正🙏📢愿你忠于自己，热爱生活引言在前面我们学习了Redux，我们在写案例的时候... 查看详情

react入门学习（十五）--react-redux基本使用(代码片段)

reactnative学习笔记

React是使用ES6,支持JSX语法,开发组件化web或native的工具.现阶段使用Babel工具转换成ES5代码.组件通过props属性传递不变化的内容,UI通过state属性变动来产生变化.React一个界面框架,数据的管理在js中比较麻烦,容易混乱.有个redux库可以... 查看详情

react学习笔记2之正确使用状态

//状态不要直接修改，比如://错的，这样写不会重新渲染组件this.state.comment=‘Hello‘;//修改状态正确的方式this.setState({comment:‘Hello‘});setState方法的参数可以接受一个对象，也可以接受一个回调函数，状态的修改可能是异步的，... 查看详情

react之redux概念简述

React的Redux相当于Vue的VuexRedux工作原理查看详情