redux学习笔记

Redux流程

Redux概述

当我们页面渲染完之后，UI就出现了，用户就会触发一些Actions，Actions会送到Reducer这个方法里面去 ， 然后Reducer会更新这个Store,React的State其实是包含在Store里面，我们也可以认为State是Store的一部分，我们视图层的东西就是由State决定的。我们在开发React中在Reducer中写一些State方法，我们根据State来渲染UI，这就是Redux完整的流程。

react-redux安装与资料获取

安装：npm install react-redux redux

资料：

- 英文：http://redux.js.org/

- 中文：http://cn.redux.js.org

react-redux 框图

react-redux 框图

当我们的用户点下鼠标,鼠标点在View层，也就是我们渲染出来的React组件，这样页面会产生一些Actions,Actions会传到Store里面去，State里面的Middleware是他的中间件(中间件：接收一一些东西，作用作用再吐出来)，实际上这些Actions是最终作用在Reducer(响应)上的，Reducer决定了我们当前的State和Action结合起来我们的State会发生什么变化，State变化之后反过来作用在V层，也就是作用在组件上，组件上就知道有什么变化了，然后重新渲染在屏幕上。

使用Redux实现一个TODO

项目结构

-- actions

-- components

-- container

-- reducer

- index.html

- server.js

- webpack

action

action

reducer

reducer

store

srore

组件

组件