React学习笔记_远程加载数据

异步加载数据 async

一、页面

二、state数据结构

state.selectedReddit

{selectedReddit: "reactjs"}

请求获取数据 state.postsByReddit

reactjs: {isFetching: false, didInvalidate: false, items: Array(26), lastUpdated: 1510757456429}

mapStateToProps:

{selectedReddit: "reactjs", posts: Array(25), isFetching: false, lastUpdated: 1510757066974, dispatch: ƒ}

{selectedReddit: "frontend", posts: Array(0), isFetching: true, lastUpdated: undefined, dispatch: ƒ}

• posts 代表数据
• isFetching 是否在请求加载数据中
• lastUpdated 最后一次加载时间
• didInvalidate

三、设置初始值

state.selectedReddit : reactjs

const selectedReddit = (state = 'reactjs', action) => {

  switch (action.type) {
    case SELECT_REDDIT:
      return action.reddit
    default:
      return state
  }
}

四、页面构造

• Picker select 选择加载的内容
• Posts 展示请求返回数据

class App extends Component {

  render() {
    const { selectedReddit, posts, isFetching, lastUpdated } = this.props
    const isEmpty = posts.length === 0
    return (
      <div>
        <Picker value={selectedReddit}
                onChange={this.handleChange}
                options={[ 'reactjs', 'frontend' ]} />
        
        <div style={{ opacity: isFetching ? 0.5 : 1 }}>
              <Posts posts={posts} />
        </div>
      </div>
    )
  }
}

四、渲染完成后开始获取数据

在 componentDidMount 中请求加载数据

  componentDidMount() {
    const { dispatch, selectedReddit } = this.props
    dispatch(fetchPostsIfNeeded(selectedReddit))
  }

• 获取数据前 先显示加载中
• 获取数据结束后，显示数据

export const fetchPostsIfNeeded = reddit => (dispatch, getState) => {
    if (shouldFetchPosts(getState(), reddit)) {
        return dispatch(fetchPosts(reddit))
    }
}


const fetchPosts = reddit => dispatch => {
    dispatch(requestPosts(reddit))
    return fetch(`https://www.reddit.com/r/${reddit}.json`)
        .then(response => {
            return response.json()
        })
        .then(json => {
            console.log(json);
            return dispatch(receivePosts(reddit, json))
        })
}

五、下拉菜单

const Picker = ({ value, onChange, options }) => (
    <span>
    <h1>{value}</h1>
    <select onChange={e => onChange(e.target.value)}
            value={value}>
      {options.map(option =>
          <option value={option} key={option}>
              {option}
          </option>)
      }
    </select>
  </span>
)


export default Picker

六、下拉菜单改变后重新加载数据。

    handleChange = nextReddit => {
        this.props.dispatch(selectReddit(nextReddit))
    }

action

export const selectReddit = reddit => ({
    type: SELECT_REDDIT,
    reddit
})

reducer

const selectedReddit = (state = 'reactjs', action) => {
    switch (action.type) {
        case SELECT_REDDIT:
            return action.reddit
        default:
            return state
    }
}

重新渲染组件,渲染完成后请求数据，加载数据

  componentDidMount() {
    const { dispatch, selectedReddit } = this.props
    dispatch(fetchPostsIfNeeded(selectedReddit))
  }