react+router+redux构建项目注意事项

 

1.fetch获取API接口数据

function fetchPosts(reddit){
	return dispatch => {
		dispatch(requestPosts(reddit))
                //注意单引号和反引号的区别
		return fetch(`https://www.reddit.com/r/${reddit}.json`)
			.then(response => response.json())
			.then(json => dispatch(receivePosts(reddit, json)))
	}
}

 2.组件内的逻辑判断

  render() {
    const { selectedReddit, posts, isFetching, lastUpdated } = this.props
    const isEmpty = posts.length === 0
    return (
      <div>
        <Picker value={selectedReddit}
                onChange={this.handleChange}
                options={[ 'reactjs', 'frontend' ]} />
        <p>
          {/**大括号，是**/}
          {lastUpdated &&
            <span>
              Last updated at {new Date(lastUpdated).toLocaleTimeString()}.
              {' '}
            </span>
          }
          {/**大括号，否**/}
          {!isFetching &&
            <a href="#"
               onClick={this.handleRefreshClick}>
              Refresh
            </a>
          }
        </p>
          {/**大括号，进行多次逻辑判断。添加行内样式**/}
        {isEmpty
          ? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)
          : <div style={{ opacity: isFetching ? 0.5 : 1 }}>
              <Posts posts={posts} />
            </div>
        }
      </div>
    )
  }

 3.组件内部的循环输出

    return (
      <span>
        <h1>{value}</h1>
        {/**添加事件处理,那个onChange事件处理是已经被dispatch处理过的**/}
        <select onChange={e => onChange(e.target.value)}
                value={value}>
        {/**数据循环输出**/}
          {options.map(option =>
            <option value={option} key={option}>
              {option}
            </option>)
          }
        </select>
      </span>
    )

 4....