React-Redux 使用

  1. 如果只使用redux,那么流程是这样的:

    component --> dispatch(action) --> reducer --> subscribe --> getState --> component

    用了react-redux之后流程是这样的:

    component --> actionCreator(data) --> reducer --> component

    store的三大功能:dispatch,subscribe,getState都不需要手动来写了。react-redux帮我们做了这些,同时它提供了两个好基友Provider和connect。
  2. Provider是一个组件,它接受store作为props,然后通过context往下传,这样react中任何组件都可以通过context获取store。也就意味着我们可以在任何一个组件里利用dispatch(action)来触发reducer改变state,并用subscribe监听state的变化,然后用getState获取变化后的值。但是并不推荐这样做,它会让数据流变的混乱,过度的耦合也会影响组件的复用,维护起来也更麻烦。
  3. connect --connect(mapStateToProps, mapDispatchToProps, mergeProps, options)是一个函数,它接受四个参数并且再返回一个函数--wrapWithConnect,wrapWithConnect接受一个组件作为参数wrapWithConnect(component),它内部定义一个新组件Connect(容器组件)并将传入的组件(ui组件)作为Connect的子组件然后return出去。

    所以它的完整写法是这样的:connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(component)

react-redux 流程:

  1. 定义组件;
  2. 定义action;
  3. 定义Reducer:reducer1(state,action);
  4. 定义store:store(reducer1);
  5. 定义mapStateToProps(state);
  6. 定义mapDispatchToProps(dispatch);
  7. 定义connect:
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(组件);
  1. 渲染元素:
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('page')
);

redux 理解

  • 为了有更好的state管理,就需要一个库来作为更专业的顶层state分发给所有React应用,这就是Redux。

    让我们回来看看重现上面结构的需求:

    a. 需要回调通知state (等同于回调参数) -> action

    b. 需要根据回调处理 (等同于父级方法) -> reducer

    c. 需要state (等同于总状态) -> store
  • 对Redux来说只有这三个要素:

    a. action是纯声明式的数据结构,只提供事件的所有要素,不提供逻辑。

    b. reducer是一个匹配函数,action的发送是全局的:所有的reducer都可以捕捉到并匹配与自己相关与否,相关就拿走action中的要素进行逻辑处理,修改store中的状态,不相关就不对state做处理原样返回。

    c. store负责存储状态并可以被react api回调,发布action.
  • 当然一般不会直接把两个库拿来用,还有一个binding叫react-redux, 提供一个Provider和connect。很多人其实看懂了redux卡在这里。

    a. Provider是一个普通组件,可以作为顶层app的分发点,它只需要store属性就可以了。它会将state分发给所有被connect的组件,不管它在哪里,被嵌套多少层。

    b. connect是真正的重点,它是一个科里化函数,意思是先接受两个参数(数据绑定mapStateToProps和事件绑定mapDispatchToProps),再接受一个参数(将要绑定的组件本身):

    mapStateToProps:构建好Redux系统的时候,它会被自动初始化,但是你的React组件并不知道它的存在,因此你需要分拣出你需要的Redux状态,所以你需要绑定一个函数,它的参数是state,简单返回你关心的几个值。

    mapDispatchToProps:声明好的action作为回调,也可以被注入到组件里,就是通过这个函数,它的参数是dispatch,通过redux的辅助方法bindActionCreator绑定所有action以及参数的dispatch,就可以作为属性在组件里面作为函数简单使用了,不需要手动dispatch。这个mapDispatchToProps是可选的,如果不传这个参数redux会简单把dispatch作为属性注入给组件,可以手动当做store.dispatch使用。

react-redux 知识点的更多相关文章

  1. React & Redux 的一些基本知识点

    一.React.createClass 跟 React.Component 的区别在于后者使用了ES6的语法,用constructor构造器来构造默认的属性和状态. 1. React.createCl ...

  2. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

  3. ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

    工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...

  4. react + redux 完整的项目,同时写一下个人感悟

    先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...

  5. 你要的 React 面试知识点,都在这了

    摘要: 问题很详细,插图很好看. 原文:你要的 React 面试知识点,都在这了 作者:前端小智 Fundebug经授权转载,版权归原作者所有. React是流行的javascript框架之一,在20 ...

  6. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  7. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  8. react+redux官方实例TODO从最简单的入门(6)-- 完结

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...

  9. react+redux官方实例TODO从最简单的入门(1)-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

  10. 重写官方TodoList,对于初学react+redux的人来说,很有好处

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

随机推荐

  1. Docker(4):Dockerfile命令一览

    1.FROM 指定基础镜像 FROM 指令用于指定其后构建新镜像所使用的基础镜像.FROM 指令必是 Dockerfile 文件中的首条命令,启动构建流程后,Docker 将会基于该镜像构建新镜像,F ...

  2. L267 How to save money

    When it comes to saving money, the struggle is all too real. It's like your bank account and your 20 ...

  3. ios初识UITableView及简单用法二(模型数据)

    // // ViewController.m // ZQRTableViewTest // // Created by zzqqrr on 17/8/24. // Copyright (c) 2017 ...

  4. MYSQL锁表问题解决

    本文实例讲述了MYSQL锁表问题的解决方法.分享给大家供大家参考,具体如下: 很多时候!一不小心就锁表!这里讲解决锁表终极方法! 案例一 ? 1 mysql>show processlist; ...

  5. Day13作业及默写

    1. 整理今天的博客,写课上代码,整理流程图. 博客链接--博客园 2. 写一个函数完成三次登陆功能: 用户的用户名密码从一个文件register中取出. register文件包含多个用户名,密码,用 ...

  6. Python基础5--字符串

    1 find().rfind().index().rindex().count() s = "this apple is red apple" s.find("apple ...

  7. 后台返回json字符串 页面js报错 Uncaught SyntaxError: Unexpected identifier

    后台json字符串是 [{"name": "报销申请", "id": "start"}, {"name&quo ...

  8. 【c++基础】遍历目录并写入txt文件-linux

    前言 /****************************************************************************** * File: get_train ...

  9. JavaBasic_03

    变量 变量定义的格式: 数据类型 变量名 = 初始化值; 可以在一行中定义多个变量(在实际开发中不推荐,推荐一行定义一个变量)数据类型 变量名1=初始化值,变量名,...,变量名n        // ...

  10. Angular 插值字符串

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...