Redux学习

最近在这段时间了解了下redux，下面简单记录下所得。

redux总结

首先，还是用几句话简单概括下redux吧，欢迎拍砖。

redux采用的函数式编程方式，基于单项数据流模式管理应用中的状态。
一个复杂应用对应一个状态树，应用模块之前共享的状态都交由该状态树负责维护。
只能通过触发action对象来更新状态树。
redux核心功能只提供简单的同步方式管理应用状态，即更新、获取状态。其他额外功能通过Middleware方式提供。

下面，先通过经典应用todos简单介绍下redux的一些基础概念

state

state树中存放一个应用程序内所有共享的数据，一个应用程序有且只有一个state。
todos的state结构为

{
    todos: [], // 完整的任务列表
    filter: 'SHOW_ALL' // 当前选中的任务过滤条件
}

action

action是唯一种改变state的方式，用来通知reducers修改state。
action是JavaScript plain object，描述“发生了什么”。
默认action对象内部必须有type字段(字符串)来表示将要执行的动作。

const ADD_TODO = 'ADD_TODO'
{
    type: ADD_TODO,
    title: '你个标题党'
}

actionCreator就是生成action对象的函数，非常纯的纯函数。

function addTodo(title) {
    return {
        type: ADD_TODO,
        title
    }
}

reducer

action对象负责描述”发生了什么“，那reducer就是执行者，按照action对象的描述，
严格更新state。
reducer也是一种纯函数，接受action对象和state树作为参数，生成新的state。

const reducer = (prevState, action) => nextState

这里reducer采用纯函数的意义是保证应用状态的可预测性，只要传入参数可知，那结果就可知。
同时nextState并不是直接修改prevState所得，而是在prevState基础上返回的一个新数组，通过
Object.assign或者immutable.js生成。这样的目的是方便跟踪全局应用状态和回退/撤销操作，
而且可以在React组件内直接通过shouldComponentUpdate(nextProps, nextState)进行对比。
所以，千万不要“玷污”reducer函数：

修改传入参数
执行有副作用的函数，如API请求和路由跳转
返回非纯函数，如Date.now()或Math.random()

最后，随着应用的复杂，state树也会更加庞大，reducer内部的处理逻辑也会更加复杂。很难想象一堆代
码根据action.type的可能值进行判断处理。
我们可以通过分解、细化reducers来拆分数据处理逻辑，最后通过redux提供的combineReducers()
API来生成唯一的rootReducer。

const todoApp = combineReducers({
  visibilityFilter,
  todos
})

store

store就是将action和reducer联系在一起的对象。

const = createStore(reducer, initState)

store对象有三种方法,通过这三种方法来维持应用的state。

提供getState()方法获取应用的state
提供dispatch(action)方法通知reducer根据action对象更新state
提供subscribe(listener)注册监听器，监听state的更新，然后调用listener函数
通过调用subscribe(listener)返回的函数，注销监听器

至此，redux的核心方面已经说完。你可能发现这个redux似乎和观察者模式差不多呢。其实，它就是一个观察者模式。
我们可以通过babel-node执行我们的todos查看redux应用的调用过程。

ps: balel-node是node中安装babel插件转换ES6代码，此时node v6.3.1还不支持export & import用法
上面redux调用流程图：

redux只是一种应用状态管理器，我们需要通过react-redux结合React一起使用才能开发出完整的应用。

react-redux

react-redux是redux官方提供的一种绑定react的实现方案。主要提供了两个api：

<Provider store>包裹React顶层组件，并且为子组件传递Redux store props
connect([mapStateToProps], [mapDispatchToProps])

connect方法主要有可选参数，具体可参考官网API文档，不过平常主要使用这两个

mapStateToProps(state) 每次state树更新时，都会被connect调用，返回需要传递给子组件的state对象，并被组合到react组件的props中。
mapDispatchToProps(dispatch): mapDispatchToProps负责返回一个 dispatchProps。dispatchProps 是actionCreator的key和dispatch(action)的组合。

{
    addTodo,
   removeTodo,
}

react组件内部通过this.props.addTodo('hello')调用。

Middleware(中间件)

在介绍接下来的内容之前，插个已经被问烂的问题：什么是js闭包和函数柯里化。此处只是简单的举个例子说明一下

let test = (a, b) => a + b
let curryTest = a => b => a + b

好，接下来继续扯我们的，什么是Middleware
此处，Redux通过Middleware实现对store.dispatch的封装，扩展
该函数原有的功能，典型的是实现state日志记录的功能。

// 手动记录logger功能代码
console.log('dispatching', action)
store.dispatch(action)
console.log('next state', store.getState())

而redux通过Middleware建立一个store.dispatch的链条，每层middleware都会接受前一个middleware返回
的next(最初是store.dispatch), 然后在进行封装，返回给后一个middleware调用的next，直到最后一个middleware返回
原始的store.dispatch处理action对象。
例如官网的logger middleware代码:

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

applyMiddleware(...middlewares)源码:

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, initialState, enhancer) => {
    var store = createStore(reducer, initialState, enhancer)
    var dispatch = store.dispatch
    var chain = []

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

compose(..funcs)源码

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  } else {
    const last = funcs[funcs.length - 1]
    const rest = funcs.slice(0, -1)
    return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
  }
}

通过源码我们能发现，applyMiddleware接受的Middlewares数组除了最后一个middleware接受原始的store.dispatch(Array.prototype.reduceRight)，其余middleware都会接受前一个middleware封装后的next，所以此时的redux流程图就是下面这样：

介绍完redux的middleware，那redux的异步流程模式也就出来了。官网是通过redux-thunk Middleware实现的，我们看下thunkMiddleware的源码：

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

这样store.dispatch就可以接受函数，也就可以将其和网络请求状态动态绑定在一起了。
具体源码可参考官网async示例源码。

本文参考链接：

posted @ 2016-08-05 20:20 qingguoing 阅读(1081) 评论(0) 编辑收藏举报

刷新页面返回顶部

qingguoing

叩首问路，码梦为生