Redux 源码初探

标签： 源码解析,前端

---

Redux

1. Reducer

combineReducers
将多个reducer 合并成一个reducer . 在后面store处理中. 可以直接是操作这个合并的reducer ,而不用操作多个reducer..每个reducer 处理返回的state 存储在store 的state 以reducer名称为key.

2. Store

createStore
维护一个state.这个state 是redux 的state 跟react 的state 不同.同时提供了几个方法:
getState(): 返回当前的state
subscribe(): 监听state 的变化
dispatch(): 当用户发起一个action会使用这个方法将action 传递给reducer.
同时对注册的监听器进行回调.
replaceReducer: 替换Reducer

3.Action

bindActionCreator
将我们生成action 的方法跟dispatch方法连接起来.
例如. 有一个生成actionB 的方法createActionB .
通过 bindActionCreator 会生成方法新的createActionB .新的会代理上面的createActionB然后将生成的actionB 使用dispatch派发出去.

4.Middleware

applyMiddleware
这应该是redux 中最有意思的一个方法.
通过使用createStore 生成一个store和dispatch
当用户的action发起以后会先经过middlewares ,先被middlewares处理, 然后处理过的action再被上面dispatch处理掉.
通过中间件我们可以做特别有意思的意思, 比如日志跟踪,时光旅行,异步action
这里主要是用一个dispatch 来代理store的dispatch 方法.来实现中间件的功能.

Paste_Image.png

react-redux

connect
mapStateToProps: 将redux 的state 转换成props
mapDispatchToProps: 主要用于将action和dispatch 连接起来然后放置在props 中
mergeProps: 讲上面的两个生成的props 和connect 自己的props 合并在一起传递给子控件.

connectAdvanced:
该方法在 redux 5.0 加入.
看这个方法名可以看出这个是connect 的高阶版. 有更自由的定制.和更好的扩展. 比方说指定特定的store,然后更灵活的组合props.
从可以指定特定store上可以看出.官方开始拥抱多store 的方案.

Provider
这是一个Component 所以它有Component 有的生命周期. 这个的作用其实就是将redux 生成的store 传递到下面的Component.界面的渲染交给他的子类来处理.

tip:

store 的state 和react 中的state 在react-redux 中的关系.
在react-redux 3.0 中 store 的state 存储在react 的state 中以storeState 为key.
在react-redux 4.0 中store 的state 直接存储在react 的state , 这里可以把这两个当成同一个东西.
在react-redux 5.0 中store 的state 已经从react 的state 中剥离出来.

react-thunk

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

    return next(action);
  };
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

这是redux 的中间件. 主要的功能是扩展你的action. 他支持你返回一个function 类型的action. 在中间件的时候调用你的function 并返回可以被Reducer 处理的action.

尾巴

redux ,react-redux ,react-thunk 源码还是简单的.但是里面的思想还是值得我们去推敲,琢磨.