redux使用说明文档.docx

《redux使用说明文档.docx》由会员分享，可在线阅读，更多相关《redux使用说明文档.docx（4页珍藏版）》请在三一办公上搜索。

1、redux使用说明文档Redux使用说明文档 1.redux的原理 redux是一种设计模式，维护单一的state。使用redux开发的程序，在页面的每一次操作，点击按钮，输入文字等等都需要写事件，操纵redux维护的state，进而改变程序状态。 2.redux的组成 2.1 state 根对象的结构 在 react 中，我们尽量会把状态放在顶层的组件，在顶层组件使用 redux 或者 router。 这就把组件分为了两种：容器组件和展示组件。 容器组件：和 redux 和 router 交互，维护一套状态和触发 action。 展示组件：展示组件是在容器组件的内部，他们不维护状态，所有数据

2、通过 props 传给他们，所有操作也是通过回调完成。这样，我们整套应用的架构就显得清晰了。 2.2 part redux 分为三大部分，store ， action ，reducer 。 2.2.1store 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。 或者这么说 store 的职责有这些： 维护整个应用的 state 提供 getState 方法获取 state； 提供 dispatch(action) 方法更新 state； 通过 subscribe(listener) 注册监听器。 这么解释一下

3、，整个应用的 state 都储存在 store 中，容器组件可以从 store 中获取所需要的状态。 容器组件同时也可以发送给 store 一个 action，告诉他改变某个状态的值，所以说容器组件只要发送一个指令，就可以叫 store 去 setState，然后 store 的 state 改变，回过来容器组件获取到的 state 改变，导致 views 的更新。 2.2.2 action action 可以理解为一种指令，store 数据的唯一由来就是 action，action 是一个对象，它需要至少一个元素，type，type 是这个指令的唯一标识，其它元素是传送这个指令的 state

4、 值 type: ACTION_TYPE, text: “content”, 这个指令由组件触发，然后传到 reducer。 Action通常由函数创建，与数据库交互时action通常是异步的action，此时action不再是简单的字符串，而是一个能产生字符串的函数。异步的action经过trunk中间件的处理里面的数据才能被使用。 2.2.3 reducer action 只是说明了要去做什么，和做这件事情需要的参数值。 具体去改变 store 中的 state 是由 reducer 来做的。 reducer 其实是一个包含 switch 的函数，前面不是说组件触发的 action 会传递

5、到 reducer，reducer 接收这个参数 action，他通过 switch(action.type) 然后做不同操作，前面说了，这个 type 是指令的标识，reducer 根据这个标识来作出不同的操作。 这个操作是什么呢？ reducer 还接收另一个参数 state，这个是旧的 state。从 action 里面还可以获取到做这个操作需要的 参数值。 这个操作其实就是对原有的 state 和 从 action 中的到的值，来进行操作然后返回一个 新的 state 到 store。 2.3 数据流 把前面的语言组织一下，整个操作的数据流其实是这样的： store 把整个应用的 st

6、ate，getState，dispatch，subscribe 传给顶层容器组件； 容器组件和三个部分交互： 内部的展示组件：容器把状态分发给各个组件，把 dispatch以回调的形式分发给各个组件； action：容器获取 action； reducer：容器可以调用 dispatch(action)，这个上面说了，会以回调的形式给下面的子组件，这样就可以根据不同的用户操作，调用不同的 dispatch(action)，执行了这个函数之后，就把 action 传给 reducer，然后看 reducer； reducer 得到容器组件传来的 action 之后，根据 action.type

7、这个参数执行不同操作，他还会接收到 store 里面的原 state，然后把原 state 和 action 对象里面的其它参数进行操作，然后 return 一个新的对象。 reducer return 一个新的对象到 store，store 根据这个新对象，更新应用状态。 一个循环 。 3.Redux流程图及yeoman产生的项目骨架的使用。 注意点： 流程图中的核心是一个叫做thunk的中间件，该中间件的作用是处理转发过来的异步的action函数。 通过图来简单概括：action是数据产生的源泉，数据库中的数据action通过函数取出。通过store提供的dispatch函数将action发送到reducer，reducer通过一个switch函数处理数据，reducer将数据提供给store，供view展示。