reducer在react使用

​

 编写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);

​