redux-中间件

操作redux 状态的时候，先会通过中间件拦截，可在这个过程中进行操作

reducer 相当于 vuex中的 state，根据type 返回值 actions 相当于 vuex中的 action， dispatch触发

• 需要引入 redux 的 applyMiddleware ```javascript import {createStore, applyMiddleware } from ‘redux’

// 中间件 const logger = store => next => action => { console.log(‘dispatch’, action) let result = next(action) // 加载下一个中间件 console.log(‘next state =>’, store.getState()) return result }

const error = store => next => action => { try{ next(action) } catch(e) { console.log(‘error=>’, e) } }

// 注册到store上面 const store = createStore(rootReducer, {}, applyMiddleware(logger，error))

- 第三方中间件
cnpm i -D redux-logger
```javascript
import logger from 'redux-logger'
const store = createStore(rootReducer, {}, applyMiddleware(logger))

异步操作 ， actions中

使用setTimeout模拟异步

export const increment = (num) => {
  return dispatch => {
    setTimeout(() => {
      dispatch({
          type: constants.INCREMENT,
          num
      })
    }, 1000)
  }
}

• 需要在index.js中引入 redux-thunk cnpm i -D redux-thunk

import thunk from 'redux-thunk'
// actions  可以使用异步  全局引用一次
const store = createStore(rootReducer, {}, applyMiddleware(logger,thunk))

实例

• actions/user.js ```javascript import {FETCH_USER} from ‘../constants’

export function fetchUser(user) { return { type: FETCH_USER, user } }

// 异步转同步的网络请求 export const getUser = () => { return dispatch => { fetch(‘https://douban.uieee.com/v2/movie/in_theaters').then(res => res.json()).then(data => { // 修改 state dispatch(fetchUser(data)) }).catch(err => { console.log(err) }) } }

- reducer/user.js
```javascript
import {FETCH_USER} from '../constants'
// reducer是个纯函数， 改变store数据的
// 数据在action 中
// 改变对象
const initState = {
  userInfo: {
    title: 1
  }
} 
// state 只读的，必须返回一个新对象    
const counter = (state = initState, action) => {  // action对象 actions中的文件
  switch(action.type) {
    case FETCH_USER:
      // 返回新对象
      return {
        userInfo: action.user
      }
    default:
      return state
  }
}
export default counter

• 页面触发

import React from 'react';
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import * as userActions from '../actions/user'
class User extends React.Component{
  render() {
    return (
      <div className='container' >
        <p className='text-center'>我是 user  {this.props.name}</p>
        <p className='text-center'>userInfo: {this.props.user.userInfo.title}</p>
        <button onClick={() => this.props.userActions.getUser()}>获取数据</button>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  console.log(state)
  return {
    user: state.user
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    userActions: bindActionCreators(userActions, dispatch)
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(User)