【原】redux学习笔记

来源:http://www.chinese-glasses.com 作者:Web前端 人气:67 发布时间:2020-05-06
摘要:store.getState() 抓state状态---只能抓取一次store.subscribe()订阅---state更新会触发---首次不更新不触发,导致影响首次渲染 Reducer的作用: 官方描述:Action只是描述了有事情发生了这一事实,

store.getState() 抓state状态---只能抓取一次store.subscribe() 订阅---state更新会触发---首次不更新不触发,导致影响首次渲染

Reducer的作用:

官方描述:Action 只是描述了有事情发生了这一事实,并没有指明应用如何更新 state。这是 reducer 要做的事情。

 

这么说吧,Action就像一个指挥者,告诉我们应该做哪些事,比如我要删除,reducer就会给我们提供‘资源(就是上面说的数据)’,真正的体力劳动者是reducer。

也就是说,action里面的每一种描述,比如新增啦,删除一个,删除全部啦,reducer都有一个对应的函数来处理数据。之后返回给你一个新的state

 

 

reducer 只是一个模式匹配的东西,真正处理数据的函数,是额外在别的地方写的,在 reducer 中调用罢了。

 

 

数据流动的方向:component-action-reducer-state-component

Action 作用。

1、用Action来分辨具体的执行动作。比如我是要添加一个项目还是删除一个项目。

2、操作数据首先得有数据。比如添加数据得有数据,删除数据得有ID。action就是存这些数据的地方。

3、不带其他数据,仅仅启示已有数据需要如何调整,或者需要主动获取哪些数据。如果我要删除掉全部数据,只要告知这件事即可

 

redux是react的状态管理工具,却不仅仅只是为了react而生的,所以在使用中会存在痛点。而react-redux是专门为了react定制,目的是为了解决redux的痛点,起到了补充的作用。

redux的流程是:(截取网上的一张图)

 

10bet 1

 

 

流程如下:在redux中用户的操作并不会直接导致view层的更新,而是view层发出actions通知出发store里的reducer从而来更新state

state的改变会将更新反馈给我们的view层,从而让我们的view层发生相应的反应给用户。

 

redux中有三个基本概念,Action,Reducer,Store。

 

但为了区分于以往的MVC模式,并向facebook的贡献表达敬意,后面我们将把这种优化后的 Model-View-Controller 开发模式在React背景下正式称为Flux模式。

store

store/configureStore.js

10bet 2

上面章节中,我们使用 action 来描述“发生了什么”,和使用 reducers 来根据 action 更新 state 的用法。

 Store 就是把它们联系到一起的对象。我们这里的作用是,创建了一个Store。createStore 有两个参数,Reducer 和 initialState。  将reducer的数据更新拿过来,然后如果没有更新的话就传一个默认值。

如果有跟新,我们就 replace掉。基本上,所有的数据都在这里了。

 

稍微再介绍一下Store ,它有以下职责:

维持应用的 state;
提供 getState() 方法获取 state;
提供 dispatch(action) 方法更新 state;
通过 subscribe(listener) 注册监听器。

Store提供了一些方法。让我们很方便的操作数据。

 我们不用关心Reducer和Action是怎么关联在一起的,Store已经帮我们做了这些事。。

 store有四个方法。
 getState: 获取应用当前State。
 subscribe:添加一个变化监听器。
 dispatch:分发 action。修改State。
 replaceReducer:替换 store 当前用来处理 state 的 reducer。

常用的是dispatch,这是修改State的唯一途径,使用起来也非常简单,他看起来是这样的~  store.dispatch(ADD_TODO),虽然我们这里没有这样写,比如你的view需要有些地方更新数据,就可以这样来拿数据。

 

时间: 2019-09-13阅读: 162标签: reduxredux和react-redux的关系:

写博客的目的主要是做一下笔记,总结一下思路,以及和大家交流交流

state: 状态收集,更新内部state状态,更新订阅(store.subscribe)state的组件(component)

 

更改state:component--dispatch(action)--reducer

react-redux

这是另一个概念,Redux 是独立的,它与React没有任何关系。React-Redux是官方提供的一个库,用来结合redux和react的模块。

React-Redux提供了两个接口Provider、connect。

Provider 是一个React组件,它的作用是保存store给子组件中的connect使用。

connect  会把State和dispatch转换成props传递给子组件。它看起来是下面这样的:

    有点绕,什么意思呢,我的理解是,因为所有的数据都集中在了 store中,Provider从那里把store的数据拿了过来。给它的好朋友 connect,

connect是联系,连接的意思嘛,所以它将好朋友provider的数据拿了过来,让它供那些子组件使用。

 

./index.js

10bet 3

这里就是,provider从store那里拿来了数据,给connect,让它把这些数据传给组件。connect怎么没看到呢,继续往下看

 

containers/app.js

10bet 4

 app.js这个组件相当于是所有其他组件的父组件,最后一行我们可以看到connect, 将provider从store那里拿来的数据注入给了APP这个组件。

 

connect 会把State和dispatch转换成props传递给子组件。它看起来是下面这样的:

  它会让我们传递一些参数:mapStateToProps,mapDispatchToProps,mergeProps(可不填)和React组件。

之后这个方法会进行一系列的黑魔法,把state,dispatch转换成props传到React组件上,返回给我们使用。

 

 mapStateToProps:

 mapStateToProps 是一个普通的函数。 当它被connect调用的时候会为它传递一个参数State。 字面意思是,匹配一个state给组件。

 mapStateToProps  需要负责的事情就是 返回需要传递给子组件的State,返回需要传递给子组件的State, 返回需要传递给子组件的State,(重要的事情说三遍。。。。)

然后connect会拿到返回的数据写入到react组件中,然后组件中就可以通过props读取数据啦~~10bet,~~

 

mapDispatchToProps:

字面意思:匹配dispatch给组件。

与mapStateToProps很像,接收store中的dispatch和props,使页面可以复写dispatch方法。我的理解,就是通过mapDispatchToProps这个方法,把actionCreator变成方法赋值到props,每当调用这个方法,就会更新State。有点小头晕。

慢慢理解吧,确实概念比较多。很容易晕

 

通过上面的整合,App这个父组件拿到了所有的数据todos,和所有的动作 actions,然后它就可以将这些数据派发给它的所有子组件了。子组件需要什么数据,和操作,来这里来拿即可

 

最后再粘贴上组件的代码

components/Header.js

10bet 5

 

components/TodoTextInput.js

10bet 6

* *

components/TodoItem.js   也就是那个删除按钮

10bet 7

 

components/MainSection.js     也就是列表项

10bet 8

 

redux算是简单的入门了,接下来就思考怎么跟项目好好的结合。由于是初学,有误之处,希望多多包涵,欢迎指出。

react生态系统的学习前路漫漫,react 、 react-router  、 es6 、 redux 、 webpack 、react-native 。 目前不是很懂的是redux和es6和 react-native. 共勉之。 接下来学习一下es6语法,和实战结合 redux

 

redux 的核心概念:

在介绍redux之前,先回顾一下上周学习的flux:

本文由10bet发布于Web前端,转载请注明出处:【原】redux学习笔记

关键词:

最火资讯