使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用 (4)

使用 React Redux 库的 connect() 方法来生成容器组件前，需要先定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中。
除了读取 state，容器组件还能分发 action。类似的方式，可以定义mapDispatchToProps() 方法接收 dispatch() 方法并返回期望注入到展示组件的 props 中的回调方法。它可以是一个函数，也可以是一个对象。

// 将state 映射到展示组件的 props 中 const mapStateToProps = state => { return { searchList: state.searchList } } const mapDispatchToProps = dispatch => { return { saveSearchList: searchList => dispatch(saveSearchList(searchList)) } } // export default SearchResult; // 通过connect生成容器组件 export default connect( mapStateToProps, mapDispatchToProps )(SearchResult)

3、安装redux react-redux redux-thunk

npm install --save redux react-redux redux-thunk npm install --save-dev redux-logger

4、使用react-hot-loader实现局部热更新

#安装 npm install --save-dev react-hot-loader #使用 import { AppContainer } from 'react-hot-loader'; import Route from './router/'; const render = Component => { ReactDOM.render( <AppContainer> <Component /> </AppContainer>, document.getElementById("root")); } render(Route); 引入antd-mobile移动端UI框架

antd-mobile文档
https://mobile.ant.design/index-cn

1、安装依赖

npm install antd-mobile --save

2、安装 babel-plugin-import

npm install babel-plugin-import --save

3、在 package.json 配置 antd-mobile 的按需加载（在babel下添加）

"plugins": [ [ "import", { "libraryName": "antd-mobile", "style": "css" } ] ],

4、组件中使用

import { Toast,Button } from 'antd-mobile' <Button type="primary">primary</Button> 上拉刷新及加载更多

这里使用react-pullload这个库

1、安装

npm install --save react-pullload

2、使用

import ReactPullLoad, { STATS } from "react-pullload"; import "react-pullload/dist/ReactPullLoad.css"; constructor(props) { super(props); this.state = { appList: [], appListAll: [], recommendList:[], hasMore: true, action: STATS.init, pageSize:10, page:1 }; } handleAction = action => { //new action must do not equel to old action if (action === this.state.action) { return false; } if (action === STATS.refreshing) { this.handRefreshing(); } else if (action === STATS.loading) { this.handLoadMore(); } else { //DO NOT modify below code this.setState({ action: action }); } }; // 刷新 handRefreshing = ()=>{ this.setState({ action: STATS.refreshing }); this.getAppList(); } // 加载更多 handLoadMore = ()=>{ if (STATS.loading === this.state.action) { return false; } //无更多内容则不执行后面逻辑 if (!this.state.hasMore) { return; } // 显示正在加载 this.setState({ action: STATS.loading }); let page = this.state.page+1; setTimeout(() => { this.getPageData(page); }, 1500); } render() { return ( <div className='container'> <div className='search-bar'> <Search onFoucs={this.onFoucs.bind(this)}></Search> </div> <ReactPullLoad className="block" isBlockContainer={true} downEnough={100} action={this.state.action} handleAction={this.handleAction} hasMore={this.state.hasMore} distanceBottom={100}> <Recommend list={this.state.recommendList}></Recommend> <AppList list={this.state.appList}></AppList> </ReactPullLoad> </div> ); }

因为是使用的mock数据，获取的是全部数据，所以这里采用前端分页的方式加载更多

// 分页加载 getPageData(page){ let resultList = [], list = []; let appListAll = this.state.appListAll; let pageSize = this.state.pageSize; let totalPage = Math.ceil(appListAll.length / pageSize);//总页数 let startIndex = pageSize * (page - 1); let endIndex = pageSize * page; for (let i = startIndex; i < endIndex; i++) { resultList.push(appListAll[i]); } if (page >= totalPage){ this.setState({ hasMore: false}); } if (page===1){ list = resultList; }else{ list = this.state.appList.concat(resultList); } this.setState({ appList: list, page: page, pageSize: pageSize, action: STATS.reset }) } 问题总结

1、在react中进入页面自动获取input输入焦点 ，弹出键盘
input中设置ref属性(非受控组件)，通过 this.refs.keyword调用

<input className='search-input' type="text" ref='keyword' onChange={this.appSearch.bind(this)} onFocus={this.onFoucs.bind(this)} placeholder="搜索应用" /> 也可以写成ref={(input) => { this.textInput = input; }}方式 <input type="text" ref={(input) => { this.textInput = input; }} /> 使用this.textInput.focus();方式调用 钩子函数中中调用 componentDidMount(){ this.refs.keyword.focus(); }