其他分享
首页 > 其他分享> > redux小记

redux小记

作者:互联网

Redux 设计和使用的三大原则:

  1. 单一数据源:

    一个应用永远只有唯一的数据源。使用单一数据源的好处在于整个应用状态都保存在一个对象中,这样我们随时可以 6提取出整个应用的状态进行持久化(比如实现一个针对整个应用的即时保存功能)。此外,这样 的设计也为服务端渲染提供了可能。工具函数combineReducers 可解决该数据源对象过于庞大的问题

  2. 状态是只读的:

    定义一个 reducer, 它的功能是根据当前触发的 action 对当前应用的状态(state)进行迭代,这里我们并没有直接修改应用的状态,而是返回了一份全新的状态。Redux 提供的 createStore 方法会根据 reducer 生成 store。最后,我们可以利用 store. dispatch方法来达到修改状态的目的。

  3. 状态修改均由纯函数完成

    Redux 利用每次新返回的状态生成酷炫的时间旅行(time travel)调试方式,让跟踪每一次因为触 发 action 而改变状态的结果成为了可能。

 

通过 createStore 方法创建的 store 是一个对象,包含以下方法。

 getState():获取 store 中当前的状态。
 dispatch(action):分发一个 action,并返回这个 action,这是唯一能改变 store 中数据的方式。

 subscribe(listener):注册一个监听者,它在 store 发生变化时被调用。  

 

<Provider/> 接受一个 store 作为props,它是整个 Redux 应用的顶层组件,而 connect() 提供了在整个 React 应用的任意组件中获取 store 中数据的功能。

  

redux-middleware:

  import compose from './compose';

  

  let newStore = applyMiddleware(mid1, mid2, mid3, ...)(createStore)(reducer, null);//创建一个普通的 store

  export default function applyMiddleware(...middlewares) {//applyMiddleware 的结构也是一个多层 currying 的函数。借助 compose,applyMiddleware 可以用来和其他插件加强 createStore 函数:

    return (next) => (reducer, initialState) => {

      let store = next(reducer, initialState);//利用 createStore 和 reducer 创建了一个 store

      let dispatch = store.dispatch;
      let chain = [];

      var middlewareAPI = {
        getState: store.getState,
        dispatch: (action) => dispatch(action),

      };//store 的 getState方法和 dispatch 方法又分别被直接和间接地赋值给 middlewareAPI 变量 store


      chain = middlewares.map(middleware => middleware(middlewareAPI));//middleware 带着 middlewareAPI 这个参数分别执行一遍。执行完后,获得 chain数组,保存的对象是第二个箭头函数返回的匿名函数

      dispatch = compose(...chain)(store.dispatch);//将 chain 中的所有匿名函数,组装成一个新的函数,即新的 dispatch。当新 dispatch 执行时,数组内middleware从右到左依次执行

      return { ...store,
          dispatch,

      };

    }

  }

 

  logger middleware 的实现:

  export default store => next => action => {//applyMiddleware 会对 logger 这 个 middleware 进行层层调用,动态地将 store 和 next 参数赋值。

    console.log('dispatch:', action);

    typeof action === 'function' ? action(store.dispatch, store.getState) : next(action)//判断 action 是否是函数。如果是,则执行 action,否则继续传递 action 到下 一个 middleware。

    console.log('finish:', action);

   }

 

  redux-saga: 采用generator,代替了async、await、promise等

 

  react-router-redux:

    对于前端应用来说,路由状态(当前切换到了哪个页面,当前页面的参数 有哪些,等等)也是应用状态的一部分。在很多情况下,我们的业务逻辑与路由状态有很强的关 联关系。比如,最常见的一个列表页中,分页参数、排序参数可能都会在路由中体现,而这些参 数的改变必然导致列表中的数据发生变化。因此,当我们采用 Redux 架构时,所有的应用状态必须放在一个单一的 store 中管理,路由 状态也不例外。而这就是 React Router Redux 为我们实现的主要功能。

    对 Redux 的 store 进行一些增强,以便分发的 action 能被正确识别

    

    import { browserHistory } from 'react-router';

    import { routerMiddleware } from 'react-router-redux';

    const middleware = routerMiddleware(browserHistory);

    const store = createStore(

      reducers,

      applyMiddleware(middleware)

    );

    

    可以用 store.dispatch 来分发一个路由变动的 action 了:

    import { push } from 'react-router-redux';

    // 切换路由到 /home store.dispatch(push('/home'));

 

高阶 reducer 主要通过下面 3 点来增强reducer:高阶 reducer 就是指将 reducer 作为参数或者返回值的函数

 能够处理额外的 action;
 能够维护更多的 state;
 将不能处理的 action 委托给原始 reducer 处理。

createStore 的函数签名:

export default function createStore(reducer, initialState, enhancer) { // ...}

createStore 中的第二个参数不仅扮演着 initialState 的角色。如 果我们传入的第二个参数是函数类型,那么 createStore 会认为你忽略了 initialState 而传入了 一个 enhancer。

如果我们传入了一个有效的enhancer,createStore会返回enhancer(createStore)(reducer, initialState) 的调用结果,这是常见的高阶函数调用方法。在这个调用中,enhancer 接受createStore 作为参数,

对 createStore 的能力进行增强,并返回增强后的 createStore。然后再 将 reducer 和 initialState 作为参数传给增强后的 createStore,最终得到生成的 store。

var currentReducer = reducer

var currentState = initialState

var listeners = []
var isDispatching = false

function getState() {

  return currentState//getState 方法用于返回当前状态。

}

dispatch---将当前的状态和 action 传给当前的reducer,用于生成最新的 state。在得到新的状态后,依次调用所有的监听器,通知状态的变更。

需要注意的是,我们在通知监听器变更发生时,并没有将最新的状态作为参数传递给这些监听器。这是因为在监听器中,我们可以直接调用 store.getState() 方法拿到最新的状态。

 

React-Redux 将所有组件分成两大类:UI 组件(presentational component)和容器组件(container component)。

React-Redux 提供connect方法,用于从 UI 组件生成容器组件。connect的意思,就是将这两种组件连起来。

connect 函数本身返回名为 wrapWithConnect 的函数,而这个函数才是真正用来 装饰 React 组件的。而在我们装饰一个 React 组件时,

其实就是把组件在 Connect 类的 render 方 法中进行渲染,并获取 connect 中传入的各种额外数据。

connect 函数如果传入mapStateToProps,则会store.subscribe()监听state变化

Provider在根组件外面包了一层,这样一来,App的所有子组件就默认都可以拿到state了。它的原理是React组件的context属性

class Provider extends Component {

  getChildContext() {

    return {store: this.props.store}

  }

  render() {

    return this.props.children;

  }

}

子组件就可以从context拿到store

  

标签:reducer,dispatch,组件,action,redux,createStore,store,小记
来源: https://www.cnblogs.com/diyigechengxu/p/10895135.html