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.

  • 相关阅读:
    PHP使用Memcache来存储session 其他【转载】
    Linux 学习记录 20170218
    php 数组去重
    关于php的array_diff和array_diff_assoc的使用总结
    使用谷歌浏览器调试WEB前端的一些必备调试技巧
    MySql 赋值操作符"="与":="
    移动设备检测类Mobile_Detect.php
    PHP Filter 函数 日常可用
    以符合人类阅读的方式打印php数组【转载】
    JavaWeb:HttpSession(一)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6853327.html
Copyright © 2011-2022 走看看