?
编写store.js 小state
reducer 怎么来 纯函数
state+action 生成新的state
actions type
return{
}
state
action === setstate(()=>{})
reducer.js 生成新的state 计算
action.js 修改state (数据初始化，和操作方法)
_actionsType.js
页面引入
import {connent}from ‘react-redux‘
1.src 下面有一个大的store>store.js
import {createStore, combineReducers,applyMiddleware} from ‘redux‘;
import thunk from ‘redux-thunk‘;
import {reducer as twoReducer} from ‘../views/TwoRedux/_index.js‘;
import {reducer as downupReducer} from ‘../views/Xiala/_index‘;
import {reducer as wueRling} from ‘../views/expers/_index‘;
import {reducer as shuJu} from ‘../views/shixian/_index‘;
const reducer = combineReducers({
two:twoReducer,
downup:downupReducer,
wuer:wueRling,
shixia:shuJu,
})
export default createStore(reducer,applyMiddleware(thunk));
2.在Route.js注入
import React from "react";
import { BrowserRouter, HashRouter } from "react-router-dom";
import App from "./App.js";
import { Provider } from "react-redux";
import Store from "./store/store";
const Router = () => (
<BrowserRouter>
<Provider store={Store} >
<App />
</Provider>
</BrowserRouter>
);
export default Router;
3.在src>view>创建action.js ActionTye.js Reducer.js文件
Action.js
import * as ActionType from ‘./ActionType‘
import Unit from ‘../../../Un‘
// 数据
export const getData = (text,data={},prevData)=>{
// console.log(prevData)
// data.data.push.apply(data.data,prevData);
// data.data = data.data.concat(prevData);
data.data = [...prevData,...data.data]
return{
type:ActionType.LISTDATA,
text:text,
pageData:data
}
}
// 方法
// 首次加载 或 刷新 时 都是第一页
// res.data 10 [] 10
// for X
// ...
// [...prevData,...res.data.data] 10 20
export const getFn = (text,ajax,dispatch,prevData)=>{
return{
type:ActionType.GETPDD,
text:text,
ajaxFn:Unit.getApi(ajax).then((res)=>{
// console.log(res.data)
dispatch(getData(‘发送请求‘,res.data,prevData))
})
}
}ActionTye.js
export const LISTDATA="TODO_LISTDATA";
export const GETPDD="TODO_GETPDD";
Reducer.js
import * as ActionType from ‘./ActionType.js‘;
export default (state={},action)=>{
switch (action.type) {
case ActionType.LISTDATA:
return {
action:{
type:action.type,
text:action.text
},
pddApi:action.pageData
}
default:
return state;
}
}4.在src>view里面创建app.jsx 和_index.js
_index.js
import * as actions from ‘./_store/Action‘;
import reducer from ‘./_store/Reducer‘;
export {actions,reducer};
app.jsx
import React, { Component } from ‘react‘;
import {connect} from ‘react-redux‘;
import {actions} from ‘./_index‘;
//import ReactPullLoad, { STATS } from "react-pullload";
//import ‘./ReactPullLoad.scss‘
class View extends Component {
constructor(props){
super(props);
this.state={
ajaxCfg:{
url:‘/home/mediareports‘,
cfg:{
page_number:‘1‘,
page_size:‘10‘,
},
headers:{
}
},
hasMore: true,
action: STATS.init,
index: 6,
page:1
}
}
handleAction = action => {
// console.info(action, this.state.action, action === this.state.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 = () => {
if (STATS.refreshing === this.state.action) {
return false;
}
setTimeout(() => {
//refreshing complete
this.setState({
hasMore: true,
action: STATS.refreshed,
index: 6
});
// console.log(‘刷新‘);
this.init();
}, 3000);
this.setState({
action: STATS.refreshing
});
}
handLoadMore = () => {
const { down } = this.props;
if (STATS.loading === this.state.action) {
return false;
}
//无更多内容则不执行后面逻辑
if (!this.state.hasMore) {
return;
}
setTimeout(() => {
if (this.state.index === 0) {
this.setState({
action: STATS.reset,
hasMore: false
});
} else {
this.setState({
action: STATS.reset,
index: this.state.index - 1
});
}
console.log(‘加载更多‘);
this.setState((state,props)=>{
page:state.page++
})
this.getPddFn(this.state.page,down.pddApi.data)
}, 3000);
this.setState({
action: STATS.loading
});
}
init(){
// 代码初始化
this.getPddFn(1,[])
}
getPddFn(page,prevData){
const { getPddFn } = this.props;
const { ajaxCfg } = this.state;
ajaxCfg.cfg.page_number = page;
getPddFn(‘首次启用‘,ajaxCfg,prevData)
}
componentDidMount(){
this.getPddFn(1,[])
}
lists(){
const { down } = this.props;
return down.pddApi.data.map((val,index)=>{
return(
<li key={val.id}>
{index}-----{val.main_title}
</li>
)
})
}
render(){
const { down } = this.props;
console.log(down)
const { hasMore } = this.state;
// console.log(down)
return(
<React.Fragment>
<ReactPullLoad
downEnough={150}
action={this.state.action}
handleAction={this.handleAction}
hasMore={hasMore}
distanceBottom={1000}
>
<div className="div1">111</div>
<div className="div1">111</div>
<div className="div1">111</div>
<div className="div1">111</div>
<div className="div1">111</div>
<div className="div1">111</div>
<div className="div1">111</div>
{
down.pddApi
?
<ul>{this.lists()}</ul>
:
‘‘
}
</ReactPullLoad>
</React.Fragment>
)
}
}
const mapStateToProps = (state)=> {
return {
down:state.downup
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
getPddFn:(text,ajaxcfg,prevData)=>
dispatch(actions.getFn(
text,
ajaxcfg,
dispatch,
prevData
))
}
};
export default connect(mapStateToProps,mapDispatchToProps)(View);
?
原文：https://www.cnblogs.com/xfswy/p/14946103.html