React基础（react-redux，中间件，异步action）—第四部分

react-redux

• react-redux可以方便在react中使用redux
• 提供的功能
  • 借助于Provider组件向根组件注入Store
  • 通过connect高阶组件，连接react组件和Redux状态层
  • 获取react组件所需的state和actions
• react-redux将所有组件分成两大类：UI组件和容器组件
• UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑
  
• Provider

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux';
import store from './store/index';

const App = (
  <Provider store={store}>
    <TodoList />
  </Provider>
)

ReactDOM.render(
  App,
  document.getElementById('root')
);

• connect（连接react组件和Redux状态层）
  • 该方法将UI组件和数据与逻辑相结合，返回容器组件
  • mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染
  • ```mapStateToProps``的第一个参数总是state对象，还可以使用第二个参数，代表容器组件的props对象。
  • mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射
  • 如果mapDispatchToProps是一个函数，会得到dispatch和```ownProps``（容器组件的props对象）两个参数

const mapStateToProps = (state) => ({
  inputVal: state.inputVal
});

const mapDispatchToProps = (dispatch) => ({
  changeInoutVal(e){
    const action = {
      type: 'change_input_value',
      text: e.target.value
    }
    dispatch(action);
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

中间件

• 中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action和执行 Reducer这两步之间，添加了其他功能
• 中间件就是dispatch的一个升级，最原始的dispatch方法接收到对象之后会将对象传递给store；
• 对dispatch方法升级之后，以redux-thunk这个中间件为例，如果给dispatch传递的是对象的话，就会将对象直接传递给store。如果现在传递给dispatch的是一个函数的话，那么不会将函数直接传递给store，是会将函数先执行，执行完毕之后，需要调用store的时候，这个函数再去调用store
  

中间件用法

• 如下：applyMiddleware方法的三个参数，就是三个中间件。有的中间件有次序要求，使用前要查一下文档。比如，logger就一定要放在最后，否则输出结果会不正确

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();

const store = createStore(
  reducer,
  initial_state,
  applyMiddleware(thunk, promise, logger)
);

applyMiddlewares

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, 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}
  }
}

• 所有中间件被放进了一个数组chain，然后嵌套执行，最后执行store.dispatch。可以看到，中间件内部（middlewareAPI）可以拿到getState和dispatch这两个方法

异步action

• redux store仅支持同步数据流，使用中间件可以帮助在redux应用中实现异步性。
• 在没用中间件的情况下，我们可以从React组件发出API调用（例如使用 componentDidMount()生命周期方法发出这些请求），但是在redux应用中难以实现以下两点
  • 可重用性（思考下合成）
  • 可预测性，只有 action creator 可以是状态更新的单一数据源
• 因此我们下面介绍两种常用的处理异步action的中间件

redux-thunk

• thunk中间件使我们能够编写异步action creator，它返回的是函数，而不是对象，如下所示：

export const initList = (data) => ({
  type: INIT_LIST_ACTION,
  data
})

// 这里的actionCreator就可以返回一个函数
export const getTodoList = () => {
  return (dispatch) => {
    axios.get('/list').then((res) => {
      const data = res.data;
      const action = initList(data);
      dispatch(action);
    })
  }
}

redxu-saga

• ，使用saga中间件，在派发action的时候，不仅reducer可以接受到派发的action，我们定义的``saga.js也可以==接受==到这个action，因为我们可以在saga.js```中写异步逻辑，如下是一个简单的saga.js

import { takeEvery, put } from 'redux-saga';
import { GET_INIT_LIST } from './actionTypes';
import { initListAction } from './actionCreators';
import axios from 'axios';

function* getInitList(){
  try{
    const res = yield axios.get('./list');
    const action = initListAction(res.data);
    yield put(action);
  }catch(e){
    console.log('请求失败');
  }
}

function* mySaga(){
  yield takeEvery(GET_INIT_LIST, getInitList);
}

export default mySaga;