请求loading

页面三种状态 success , request, failure

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() {
    let {error, isFetching, user} = this.props.user
    let data
    if (error) {
      data  = error
    } else if (isFetching) {
      data='loading....'
    } else {
      console.log(this.props.user.userInfo)
      data = user.title
    }
    return (
      <div className='container' >
        <p className='text-center'>我是 user  {this.props.name}</p>
        <p className='text-center'>userInfo: {data}</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)

• actions/index.js

import {FETCH_USER, FETCH_FAILURE, FETCH_SUCCESS,FETCH_REQUEST} from '../constants'
export function fetchUser(user) {
  return {
    type: FETCH_SUCCESS,
    user
  }
}
export function fetchRequest() {
  return {
    type: FETCH_REQUEST
  }
}
export function fetchFailure(error) {
  return {
    type: FETCH_FAILURE,
    error
  }
}
// 触发函数执行一定要用dispatch
export const getUser = () => {
  return dispatch => {
    dispatch(fetchRequest())
    fetch('https://douban.uieee.com/v2/movie/in_theaters').then(res => res.json()).then(data => {
      dispatch(fetchUser(data))
    }).catch(err => {
      // console.log(err)
      dispatch(fetchFailure(err))
    })
  }
}

• reducer/user.js

import {FETCH_USER, FETCH_SUCCESS, FETCH_FAILURE,FETCH_REQUEST} from '../constants'
// reducer是个纯函数， 改变store数据的
// 数据在action 中
// 改变对象
const initState = {
  user: {
    title: 1
  },
  isFetching: false,
  error: null
} 
// state 只读的，必须返回一个新对象
const counter = (state = initState, action) => {
  switch(action.type) {
    case FETCH_SUCCESS:
      return {
        isFetching: false,
        error: null,
        user: action.user
      }
    case FETCH_REQUEST:
      return {
        isFetching: true,
        error: null,
        user: {}
      }
    case FETCH_FAILURE:
      return {
        isFetching: false,
        error: action.error,
        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() {
    let {error, isFetching, user} = this.props.user
    let data
    if (error) {
      data  = error
    } else if (isFetching) {
      data='loading....'
    } else {
      console.log(this.props.user.userInfo)
      data = user.title
    }
    return (
      <div className='container' >
        <p className='text-center'>userInfo: {data}</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)