redux和react 01

来源:http://www.sh-fengwen.com 作者:家常菜谱 人气:192 发布时间:2019-10-03
摘要:react 侧重于 view,我们提到 react 就会想起 redux 这个状态管理库,是的react redux 和 rxjs 着三者结合使用 power 无比,看一看 netflix是他们结合起来用的风生水起。我们今天介绍介绍一下这个

react 侧重于 view,我们提到 react 就会想起 redux 这个状态管理库,是的 react redux 和 rxjs 着三者结合使用 power 无比,看一看 netflix 是他们结合起来用的风生水起。我们今天介绍介绍一下这个精巧的 redux,第一次接触 redux 感觉不就是观察者模式的实现,学了学,用了用感觉没那么简单,我尝试解释一下吧。

图片 1

一切从场景出发,这是一个很常见的场景,填写表单,提交表单,然后在代办列表中多一条待办记录。这就是仅次于 helloworld 的 todoList 或事 todo app。

react和redux

看一看我们使用 redux 是如何实现这个过程的。这里了解一下 redux 几个重要组成部分 action reducer store 吧

redux API

整个Redux API包含5个顶级函数:

  • Object createStore(reducer, initailState) - 创建Redux存储
  • Object combineReducers(reducers) - 将多个reducer合并成一个
  • Object bindActionCreators(actionCreators, dispatch) - 将多个状态生成器与dispatch绑定
  • Object compose(...functions) - 从左向右构造函数
  • void applyMiddleware(...middlewares) - 应用Redux中间件

分析一下,填写完表单我们会单击按钮,这是我们 view 发出一个 action 这个 action 需要包含两个信息,第一个是触发什么事件,也就是事件类型,是提交事件呀还是渲染列表事件呀。第二个信息就是数据,我们提交表单必定会有表单数据,就会触发 action ,然后

combineReducers(reducers)

combineReducers()的作用是将多个reducer合并为一个reducer

  • combineReducers的核心源码
export default function combineReducers(reducers) {
    var reducerKeys = Object.keys(reducers)
    var finalReducers = {}
    //提取reducers中value值为function的部分
    for (var i = 0; i < reducerKeys.length; i++) {
        var key = reducerKeys[i]
        if (typeof reducers[key] === 'function') {
            finalReducers[key] = reducers[key]
        }
    }

    var finalReducerKeys = Object.keys(finalReducers)

    /**
     * 典型的函数式API,始终保持闭包访问,这个就是返回的合并后的reducer
     */
    return function combination(state = {}, action={}) {

        var hasChanged = false
        var nextState = {}
        /**
         * 遍历访问finalReducers
         */
        for (var i = 0; i < finalReducerKeys.length; i++) {
            var key = finalReducerKeys[i]
            var reducer = finalReducers[key]
            /**
             *将state按照reducer的名字分离
             * 每个key都对应着state
             */
            var previousStateForKey = state[key];
            // 利用一个reducer对state中的某一部分进行更新
            var nextStateForKey = reducer(previousStateForKey, action)
            if (typeof nextStateForKey === 'undefined') {
                var errorMessage = getUndefinedStateErrorMessage(key, action)
                throw new Error(errorMessage)
            }
            nextState[key] = nextStateForKey
            hasChanged = hasChanged || nextStateForKey !== previousStateForKey
        }
        return hasChanged ? nextState : state
    }
}
  • 实例说明:
    例如:store的state中存放了两个内容:a和b,而且有两个reducer:ab,分别负责对state中的a和b的操作,当调用dispatch(action)的时候,会进行如下操作:newState[a] = a(state[a],action)newState[b]=b(state[b],action),最后就得到了新的newstate

  • 注意: state中存放了内容a和b,则a和b对应的reducer必须命名为a和b,因为在调用合并后的reducer的时候,是根据key来匹配state中的内容和对应的reducer的

Reducer 就是会根据 action 的类型 来更新 state ,他不是更改现有 state 而是将 state 复制出一份,然后这个state 上进行更改,返回一个新的版本的 state,State 更新了,store 就会更新视图,完成一次操作

bindActionCreators(actionCreators, dispatch)

bindActionCreators(actionCreators, dispatch)的作用是将多个action生成器与dispatch绑定,action生成器的作用是传入数据,返回固定类型的action,利用生成的action去操作state的改变,将action生成器与dispatch绑定的意思就是传入数据,生成action并自动将action传入dispatch

  • bindActionCreators(actionCreators, dispatch)核心源码
// 返回一个箭头函数,调用这个箭头函数,就会产生对应的action,并调用dispatch方法
function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

export default function bindActionCreators(actionCreators, dispatch) {

  // 获取各个action生成器的名称
  var keys = Object.keys(actionCreators)

  var boundActionCreators = {}
  for (var i = 0; i < keys.length; i++) {
    var key = keys[i]
    var actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  // 返回了一个对象
  return boundActionCreators
}

使用:

function mapDispatchToProps(dispatch){
    return {
        userInfoActions: bindActionCreators(userInfoActions, dispatch)
    }
}
加入userinfo中包含了一个关于用户改变的actioncreator(update)
则通过this.props.userInfoActions.update(data)就可以生成一个关于用户改变action,
并直接传递给dispatch来实现对state的操作

上代码

react-redux常用内容

  • Provider - 一个react组件,可以将从createStore返回的store放入context中,使子组件可以获取并操作store
  • connect - 将react组件与redux连接

定义一下 action 的 type就是 action 做了什么事,说明用户做了什么操作,这样做的好处不言而喻

connect

调用connect会产生一个新组件,这个组件的state与store中存放的state有关,并且它将state和对state的操作通过props的方式传递给一个子组件,在这个新组件中设置了一个监听器,并放入了store的subscribe中,当调用dispatch方法的时候,会触发这个监听器,而这个监听器的内容就是利用store中的state来更新自己的state(setState)。因此当调用dispatch时,就会触发该组件的更新。

本文由美高梅游戏平台网站发布于家常菜谱,转载请注明出处:redux和react 01

关键词:

上一篇:react 中的高阶组件

下一篇:没有了

最火资讯