zoukankan      html  css  js  c++  java
  • [Recompose] Add Local State with Redux-like Reducers using Recompose

    Learn how to use the 'withReducer' higher order component using the alternative reducer form. If you like using reducers in redux, you’ll be able to reuse that same technique but for local state.

    import React from 'react';
    import {withReducer, withHandlers, compose} from 'recompose';
    
    const UserStyle = {
        position: 'relative',
        background: 'lightblue',
        display: 'inline-block',
        padding: '10px',
        cursor: 'pointer',
        marginTop: '50px'
    };
    
    
    const StatusListStyle = {
        background: '#eee',
        padding: '5px',
        margin: '5px 0'
    };
    
    const TooltipStyle =  {
        fontSize: '10px',
        position: 'absolute',
        top: '-10px',
         '80px',
        background: '#666',
        color: 'white',
        textAlign: 'center'
    };
    
    const StatusList = () =>
        <div style={StatusListStyle}>
            <div>pending</div>
            <div>inactive</div>
            <div>active</div>
        </div>;
    
    const withToggle = compose(
        withReducer('toggleState', 'dispatch', (state = false, action) => {
            switch(action.type) {
                case 'SHOW':
                    return true;
                case 'HIDE':
                    return false;
                case 'TOGGLE':
                    return !state;
                default:
                    return state;
            }
        }, false),
        withHandlers({
            toggle: ({dispatch}) => (e) => dispatch({type: 'TOGGLE'}),
            show: ({dispatch}) => (e) => dispatch({type: 'SHOW'}),
            hide: ({dispatch}) => (e) => dispatch({type: 'HIDE'})
                     })
    );
    
    const Statue = withToggle(
        ({ status, toggle, toggleState }) =>
            (<span onClick={() => toggle(!toggleState)}>
                {status}
                {toggleState && <StatusList/>}
            </span>)
    );
    
    const Tooltip = withToggle(({ show, hide, toggleState, text, children }) => (
        <span>
            <span>
                {toggleState && <div
                    style={TooltipStyle}>
                    { text }
                </div>}
                 <span
                     onMouseOver={show}
                     onMouseOut={hide}
                 >
                    { children }
                </span>
            </span>
        </span>
    ));
    
    const User2 = ({ status, name }) => (
        <div style={UserStyle}>
            <Tooltip text="Cool Dude!">{name}</Tooltip>-
            <Statue status={status}/>
        </div>
    );
    
    export default User2;

    'withReducer' take (state_name, dispatch_function, reducer_function, init_state) as params.

  • 相关阅读:
    1020.表-继承
    1019.模式(限定名)
    1018.行安全策略
    1017.权限
    1016.表结构修改
    1015.【转】oracle rowid and postgresql ctid
    1014.表-系统列
    20201227[java]同构字符串
    oCam_v4850录屏软件
    《软件定义网络中的异常流量检测研究进展》论文笔记
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6853327.html
Copyright © 2011-2022 走看看