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

巴特西

reducer在react使用

最新文章

热门文章