Redux数据流

Posted 2023-03-22

参考技术A 目前redux流行的解决方法包括了redux、react-redux、redux-thunk等等。以后会总体来说，现在先说一下，纯redux数据流是如何实现的。理解了这个数据流，就基本理解原生redux是如何实现的了，内部流程是什么<p>
下面这个图是redux的内部流程，我结合这个图说一下。（个人理解，说错了，欢迎交流）<p>

action是一个单纯包含了type的对象，type是一个常量用来表示动作类型的。Action需要<code>store.dispath()</code>来来发送信息。例如下面这个例子：

但是通常使用action creator函数来创建action对象，这样具有灵活性，可以提供更多种的配置。

触发一个动作只需要调用<code>dispath (action_text(text))</code>

reducer的作用是用来根据具体情况来更改action对应的state树的。reducer会接受两个参数，第一个是<code>state</code>，初始化的<code>state</code>；第二个是<code>action</code>。返回的是一个新的state，这个state可以通过监听来重新渲染整个UI，这部分在后面会讲到。<code>(oldState,action)=>newState</code>

现在有了 Action 和 Reducer，Store 的作用就是连接这两者，Store 的作用有这么几个：

<ul>
<li>Hold 住整个应用的 State 状态树
<li>提供一个 getState() 方法获取 State
<li>提供一个 dispatch() 方法发送 action 更改 State
<li>提供一个 subscribe() 方法注册回调函数监听 State 的更改
</ul>
具体案例以后具体分析。

看上面的图，可以看到数据流发生改变的时候，数据是如何流动的。

单向数据流调用<code> store.dispatch(action) -> reducer(state, action) -> store.getState()</code>

（1）调用sote.dispath(action)（这里的action和上面提到的action不是一个概念，这个是一个纯的对象，上面是一个action creator）

你可以在任何地方调用 store.dispatch(action)，比如组件内部，Ajax 回调函数里面等等。

（2）Action 会触发给 Store 指定的 rootreducer
rootreducer会返回一个完整的状态树，state状态树上的各个值都可以由对应的reducer来更新。

（3）store会保存状态树
更新完state后，新的 State 会替代旧的 State。然后可以添加监听函数<code>store.subscribe(listener)</code>在回调函数里面可以通过<code>store.getState()</code>来获取新的state。这样就能更新整个UI。只要调用<code>dispath</code>，state就会根据<code>reducer</code>对应更新，进而触发监听函数<code>subscribe</code>，然后触发回调函数渲染UI。

react+redux

一、相关概念

数据流是用户行为和响应的抽象

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

React和数据流

需要数据流做支撑。

主流数据流框架——Redux

简单单一的状态树。

Redux

 

React

 

安装：

npm install react-redux redux

https://redux.js.org/

https://cn.redux.js.org/

二、项目

actions  用户行为

components 组件

container 组件

reducer store里负责分发action的行为

index.html

server.js

1、action

action是行为的抽象

 

2、reducer

 根据action.type来决定怎么做。

 

 3、store

store是所以数据和状态的存储。 state+Reducer。

4、组件

Redux知道container的存在，不知道component的存在。

 

 

redux-thunk

实现异步action

reux-gen

利用生成器，实现middleware

redux-router-redux

 

Q1：function这种写法确实不错，但是写出来的组件生命周期怎么弄！

A1：无状态组件都推荐使用function写组件。如果组件需要内部状态、声明周期，那就需要用class创建类组件。推荐用function和class创建组件。优先用function创建，需要生命周期和内部状态才用class创建。