redux

Redux 数据流

store是整个数据中心，用户通过界面触发ActionCreator ,携带着旧的 state,传递给 action,action通过 dispatch 传递并触发 reducer , reducer 改变 state 并返回，界面更新

• action

  // 用户通过导出的 ActiconCreators 触发action的方法，dispatch 将接收的数据给 reducer
  // 如果需要异步，引入中间件 redux-thunk 或 redux-saga
  changeLoading(data) {
     // return dispatch =>  //异步 
      const action = {
          type: type.LOADING,
          payload: data
      }
      store.dispatch(action)
     // }  //异步
  }
  

• reducer

  // 接收 action 传递的值，并返回一个新的 state ，直接改变state并不会更新，一般会这么写
  const reducer = (previousState = state, action) => {
    let newState = {
      ...previousState,
    };
     switch (action.type) {
      case type.IMG_BANNER:
        newState.bannerList = action.payload;
        break;
    }
    return newState;
  }
  

• type：用来标识各个数据及方法

• state ： 定义数据

• applyMiddleware

  // 顾名思义，middleware是中间件的意思，那么 applyMiddleware 就是redux 的方法，用来将所有中间件组成一个数组，依次执行
  import { createStore, applyMiddleware } from 'redux'
  import thunk from 'redux-thunk'
  import reducer from './reducer'
  const store = createStore(reducer, applyMiddleware(thunk))
  export default store
  

• combineReducers

  // 模块化，将多个 reducer 合成一个
  import { combineReducers } from 'redux'
  import Layout from './layout/reducer'
  const reducer = combineReducers({
    Layout
  })
  export default reducer
  

• connect 从 UI 组件生成容器组件

  // 应用 API
  import { connect } from 'react-redux'
  const VisibleTodoList = connect(
    mapStateToProps,
    mapDispatchToProps
  )(TodoList)
  
  // mapStateToProps
  // 是一个函数，它接受state作为参数，返回一个对象,第二个参数是容器组件的props对象，其发生变化，UI界面也会发生变化，当state发生变化或者容器组件的props发生变化时，都会触发此方法进行重新计算
  
  // mapDispatchToProps 
  // 建立 UI 组件的参数到store.dispatch方法的映射,可以是对象或者函数
  // 如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。这个函数返回一个对象，对象中键是action的名字，值是进行dispatch处理的函数,例如下面的写法：
  mapDispatchToProps((dispatch)=>{
  　　return {
  　　　　action:(data) => dispatch( actioncreator(data) )  
     }
  })
  // 通常，和 bindActionCreators 一起使用，它有 2 个参数，将actionCreators批量传递给UI组件
  // 第一个参数 actionCreators
  // 第二个参数 dispatch： 一个由 Store 实例提供的 dispatch 函数。
  mapDispatchToProps = (dispatch) => {
    return bindActionCreators(actionCreators, dispatch)
  }
  
  // 原理： 在原应用组件上包裹一层，使原来整个应用成为Provider的子组件,接收Redux的store作为props，通过context对象传递给子孙组件上的connect,是一个高阶组件
  // 它真正连接 Redux 和 React，它包在我们的容器组件的外一层，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件。
  
  // 参考链接 ： https://zhuanlan.zhihu.com/p/30671973
  

  // 举个例子
  // UI 组件
  import actionCreators from '@/store/Home/actionCreators';
  import connect from '@/components/connect';
  function Home(){};
  const connectObj = { attr:'Home',actionCreators };
  export default connect(connectObj)(Home)
  
  // @/components/connect/index.js
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  export default ({ attr, actionCreators }) => components => {
      const mapStateToProps = (state) => state[attr];
      const mapDispatchToProps = (dispatch) => bindActionCreators(actionCreators, dispatch);
      return connect(mapStateToProps, mapDispatchToProps)(components)
  }
  

react-thunk

可以在actionCreators内部编写逻辑，处理请求结果。而不只是单纯的返回一个action对象