redux学习笔记

原创 2016年06月01日 17:01:08

redux流程

  1. view直接触发dispatch
  2. 将action发送到reducer中后,根节点上会更新props,改变全局view

redux概念理解

store相关

  • redux中的store是通过createStore方法创建的,该方法接收两个参数reducer函数初始化的数据(currentState),从而形成一颗状态树
  • createStore方法调用时传入的reducer方法会在store的dispatch被调用的时候,被调用,接收store中的state和action,根据业务逻辑(即reducer方法)返回新的state
  • store含有四个方法,subscribedispatchgetStatereplaceReducer
    1. subscribe:接收一个回调(listener),当dispatch触发时,执行reducer函数去修改当前数据(currentState),并执行subscribe传入的回调函数(listener)
    2. dispatch:分发 action。这是触发 state 变化的惟一途径
    3. getState:返回应用当前的 state 树
    4. replaceReducer:替换 store 当前用来计算 state 的 reducer,不常用

可参考官方文档(翻译版)

react-redux概念理解

  1. 提供Provider组件,可以将从createStore返回的store放入context中,使子集可以获取到store并进行操作
<Provider store={store}>
    <App />
</Provider>
  1. 提供connect方法

    • 将原始根节点包装在Connect下,在Connect中的state存储不可变对象,并将state对象中的props和store中的dispatch函数传递给原始根节点。
    • Connect在componentDidMount中,给store添加listener方法(handleChange),每当store中的dispatch被调用时执行handleChange;handleChange会去修改state中的porps,使原始根节点重新render
    • 方法调用connect(mapStateToProps, mapDispatchToProps, mergeToProps)(App);
      1. mapStateToProps:定义该参数,组件将会监听 Redux store 的变化,接收store中state和props,使页面可以根据当前的store中state和props返回新的stateProps
      2. mapDispatchToProps:接收store中的dispatch和props,使页面可以复写dispatch方法,返回新的dispatchProps
      3. mergeToProps:将前两个方法参数的执行结果和组件自身的 props 传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中

    可参考官方文档(翻译版)

  2. Middleware理解

    • 文档中的例子

      const createStoreWithMiddleware = applyMiddleware(
          thunkMiddleware,
          loggerMiddleware
      )(createStore);
      store = createStoreWithMiddleware(rootReducer, initialState);
    • 可以看作middleware1(middleware2(middleware3(store.dispatch)))(action),因此每个middleware中的next是一个接收action的函数(middleware定义时有体现),在最后一个middleware中,next函数就是store.dispatch,这样action就在middleware中传递下去

问题

  1. 更新机制,测试应用中,store状态更新后,整个组件全部更新,难道每个组件都需要自己写shouldComponentUpdate方法吗?
  2. 与react-router结合的用法

参考

这段时间研究了下Redux,写写自己对它的感觉

redux middleware 详解

版权声明:本文为博主原创文章,转载请注明出处。

React依赖注入说明(mapStateToProps/mapDispatchToProps)

本博客主要来讲一下React依赖注入说明,其中涉及到mapStateToProps()和mapDispatchToProps()两种方法。...
  • genius_yym
  • genius_yym
  • 2017年03月20日 18:36
  • 12323

connect中的mapStateToProps该怎么写

react-redux api文档备注 函数将被调用两次。第一次是设置参数,第二次是组件与 Redux store 连接: connect(mapStateToProps, mapDispatchTo...
  • afanyusong
  • afanyusong
  • 2017年02月25日 14:30
  • 4984

React和Redux 之间的依赖注入connect(mapStateToProps、mapDispatchToProps)

在理解react-redux通过connect连接的关系之前,需要理解下容器组件的概念,容器组件的概念虽然理解起来容易混淆不清,它与展示组件之间确实有着本质的区别。1. 容器组件 容器组件是使用 s...
  • haoaiqian
  • haoaiqian
  • 2017年11月23日 14:46
  • 947

Redux 学习笔记(二)

要将 Redux 和 React 结合起来使用,就还需要一些额外的工具,其中最重要的是 react-redux 。react-redux 提供了两个重要的对象,Provider 和 connect,前...
  • pepping798
  • pepping798
  • 2016年08月21日 21:57
  • 2174

react-redux使用小结

redux使用小结redux使用小结 react-redux store reducer action 整合storereduceraction 补充 使用redux-dev-tools 让改变red...
  • ali1995
  • ali1995
  • 2016年11月21日 22:58
  • 2758

实例讲解基于 React+Redux 的前端开发流程

前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的an...
  • fengyinchao
  • fengyinchao
  • 2016年06月02日 13:42
  • 22749

实例讲解react+react-router+redux

前言总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应用...
  • Jizhen_Tan
  • Jizhen_Tan
  • 2016年12月20日 14:16
  • 1757

最简单的React和Redux整合的例子

react redux demo
  • chenhaifeng2016
  • chenhaifeng2016
  • 2017年03月26日 14:43
  • 4934

react引入redux之初体验(一)

不管我们项目中是否是用的redux思想的最佳实践,但是他的基本思想基本如上图,是不是十分简单明了。有人说,redux这类不能称为框架,只能说是一种思想,不过我们在此就不讨论这么学术的问题了,为了描述统...
  • jiangcs520
  • jiangcs520
  • 2017年06月27日 21:38
  • 297

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

做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angular是一个大而全的框架,用了angular几乎就不需要用其他工具辅助配合,但是react不一样...
  • sinat_17775997
  • sinat_17775997
  • 2017年03月11日 19:24
  • 484
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:redux学习笔记
举报原因:
原因补充:

(最多只允许输入30个字)