美文网首页
React & Redux

React & Redux

作者: 碧玉疾风丶 | 来源:发表于2017-02-20 15:33 被阅读0次

上面配图是一个我自己整理的redux里面的todoMVC demo示意图,串联着看的话能大概看懂项目的结构。github项目链接地址如下:

https://github.com/reactjs/redux/tree/master/examples/todomvc

对于redux,知乎上有一些前辈回答的十分精炼简洁,我觉得每次看一遍都会有新的理解。贴出如下《理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?》:

https://www.zhihu.com/question/41312576/answer/90782136


Action:

addTodo、deleteTodo分别为新增、删除待办事项的方法。新增需要知道文本内容text,删除需要知道对应id。由图可知方法返回的数据结构必有type,用于匹配reducer中的实现方法,其余参数为reducer中操作state的所需参数

综述:action只声明数据结构,types和必要参数

Reducer:

reducer用来匹配action的type,该方法会返回一个旧的state和action,action用于匹配逻辑代码

综述:reducer接受一个旧的state,并且返回一个新的state

Store:

图中用了creatStore新建store并且加入了热替换,编码比较固定。可知,reducer被注入store,store中存储了总状态,发布action(这句话如果理解的牵强就先记住)

综述:store中存储了所有的state

App:

图中标注了几处,这里通过connect把action和action(reducer)放在了一起。图中state的值为reducer中返回的对象(reducer就是操作旧的state,返回新的state),这里我们还需要把有必要的值筛选出来,传入到App中作为App的props。action也被传入到了props中,所以在App的render()函数中,代码获取了todos和actions,用以往下分发给子组件。

Provider:

这里在Provider中加入了store,其子组件为App,上面论述过store中有reducer。用户在view中调用【方法】可以发出action,然后通知store,store中的reducer根绝action改变state,state改变dom改变,最后完成渲染。

相关文章

  • Redux for ReactNative (二)

    安装 React Redux Redux不包含React库,需要单独安装React 绑定库 react-redux...

  • redux

    单独使用redux redux是核心库 与react配合使用redux 安装react-redux react-r...

  • 两张图看懂 React Redux 架构和数据流

    React 技术栈 React - 视图层Redux - 状态、数据层React-Redux - 连接Redux-...

  • redux note(一)

    redux 搭配 React使用 Redux和React之间没有关系,Redux支持React, Angular,...

  • react-redux

    一、什么是react-redux React-Redux是Redux的官方React绑定。 它允许您的React组...

  • redux的简单应用

    1、安装 redux和react-redux: npm i redux react-redux --save-de...

  • Redux简介

    Redux React-redux React-router Redux 1、基本用法: Redux中存在几个概念...

  • redux基础

    Redux react-redux React-router Redux 1、基本用法: Redux中存在几个概念...

  • 前端数据流之Redux篇(案例)

    create-react-app cartnpm i redux react-redux redux-thunk ...

  • react-redux

    使用react-redux,可以更方便的使用redux开发 先install react-redux使用react...

网友评论

      本文标题:React & Redux

      本文链接:https://www.haomeiwen.com/subject/nglewttx.html