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()两种方法。...

connect中的mapStateToProps该怎么写

react-redux api文档备注 函数将被调用两次。第一次是设置参数,第二次是组件与 Redux store 连接: connect(mapStateToProps, mapDispatchTo...

Redux 学习笔记(二)

要将 Redux 和 React 结合起来使用,就还需要一些额外的工具,其中最重要的是 react-redux 。react-redux 提供了两个重要的对象,Provider 和 connect,前...

redux学习笔记之<combineReducers源码解析>

import { ActionTypes } from '../createStore';import isPlainObject from '../utils/isPlainObject';im...
  • bgk083
  • bgk083
  • 2016年03月17日 15:05
  • 2875

react-redux学习笔记

使用action创建函数封装逻辑是react与redux配合的最佳实践: - 当所有的逻辑都被转移到redux之后,react就可以只负责渲染界面并发起action创建函数了 Action...

redux-form学习笔记

1.我们为什么要用redux-form在我们现在的后台项目里用到了很多的form表单,开始我们根据react官方提供的方法是要给每一个input或者select设置一个onChange方法,来监听表单...

react && redux 学习笔记(二)

react 的生命周期

redux-form的学习笔记

redux是一种常用的与react框架搭配的一种数据流架构,而伴随着redux的出现,也出现了许多基于redux开源的第三方库,而redux-form就是其中之一的开源组件库,到今天我写下这篇笔记为止...

Redux 学习笔记(三)

组件的重新渲染说到 react 组件,肯定离不开组件的 props 和 state,我们可以在 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状...

REACT NATIVE + REDUX 初学者学习笔记 例子 @吉他码农

学习和开发RN 已经有2/3个月,刚开始觉得挺难,主要缺乏了ES6和REACT的基础语法,不过先实践再回去补基础是我的学习之道。现在已经在项目中都封装了挺多视图插件,用起来很方便,基本在视图交互基础功...
  • mcj010
  • mcj010
  • 2016年09月28日 11:28
  • 1412
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:redux学习笔记
举报原因:
原因补充:

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