redux精品先导课程—07react手动连接

逃离我推掉我的手 2022-03-06 13:44 203阅读 0赞

还是上一节的项目，首先安装以下依赖库。

> npm i -S react react-dom
> 
> npm i -D prop-types babel-preset-react

接着使用node ser帮项目跑起来 。

然后添加预设

![20190319101428849.png][]

在index.html添加以下代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

首先把ui绘制好。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

![20190319105518770.png][]

reducer/index.js

component/counter/Counter.js

export default function Counter() {
        return (
            <div className="counter">
                <button className="sub"></button>
                <span>0</span>
                <button className="add"></button>
                <button className="addIfOdd"></button>
                <button className="addAsync"></button>
            </div>
        )
    }

component/counter/CounterPanel.js

export default function CounterPanel() {
        return (
            <div className="counterBox" style={
       {margin: 40+'px'}}>
                <div className="panel">
                    <button className="addCounter"></button>
                    <div className="counterPanel">
                    </div>
                </div>
    
                <div className="dashboard">
                    <div className="allSel line"><span className="key">HasAll:</span> <span className="val">false</span></div>
                    <div className="maximum line"><span className="key">Maximum:</span> <span className="val">null</span></div>
                    <div className="allCount line"><span className="key">AllCount:</span> <span className="val">0</span></div>
                </div>
            </div>
        )
    }

src/index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    
    
    
        <div id="root"></div>
    
        <script src="/assets/main.js"></script>
    </body>
    </html>

src/app.js

require('style/main.scss');
    import * as React from 'react';
    
    // require('component/demo.js');
    // require('component/counterByRedux');
    import CounterPanel from "component/counter/CounterPanel";
    
    export default class App extends React.Component {
        constructor(props) {
            super(props);
        }
    
        render() {
            return (
                <div>
                    <CounterPanel />
                    <CounterPanel />
                </div>
            )
        }
    }
    
    ReactDOM.render(
        <App />,
        document.getElementById('root')
    );

项目跑起来，页面是这个样子

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

接下来把所有的代码展示出来

App.js

require('style/main.scss');
    import * as React from 'react';
    
    // require('component/demo.js');
    // require('component/counterByRedux');
    import {redux, createStore, applyMiddleware} from 'redux';
    import thunk from 'redux-thunk';
    import reducer from 'reducer';
    import {increment, decrement, addIfOdd, asyncAdd} from 'actions';
    
    import CounterPanel from "component/counter/CounterPanel";
    
    const store = createStore(reducer, applyMiddleware(thunk))
    
    const boundIncrement = (id) => store.dispatch(increment(id));
    const boundDecrement = (id,value) => store.dispatch(decrement(id,value));
    const boundAddIfOdd = (id,value) => store.dispatch(addIfOdd(id,value));
    const boundAsyncAdd = (id) => store.dispatch(asyncAdd(id));
    const addCounter = panelName => store.dispatch({type:'ADD_COUNTER',panelName});
    
    /* 此处写数据验证 */
    let propTypes = {
        actions:PT.objectOf(PT.func),
        state: PT.shape({
            A:PT.arrayOf(PT.object),
            B:PT.arrayOf(PT.object),
        }),
        addCounter: PT.func
    }
    export default class App extends React.Component {
        constructor(props) {
            super(props);
        }
    
        render() {
            let {actions,addCounter,state} = this.props;
            return (
                <div>
                    <CounterPanel {...{
                        data: state.A,actions,addCounter,
                        panelName:'A'
                    }}/>
                    <CounterPanel {...{
                        data: state.B,actions,addCounter,
                        panelName:'B'
                    }}/>
                </div>
            )
        }
    }
    
    App.propTypes = propTypes;
    
    function render(){
        ReactDOM.render(
            <App 
                actions={
       {
                    boundIncrement,boundDecrement,boundAddIfOdd,boundAsyncAdd
                }}
                {...{
                    state:store.getState(),
                    addCounter
                }}
            />,
            document.getElementById('root')
        );
    }
    
    render();
    store.subscribe(render);

src\\component\\counter/counter.js

export default function Counter(props) {
        debugger
        let {
            boundIncrement,
            boundDecrement,
            boundAddIfOdd,
            boundAsyncAdd,
            value,
            id
        } = props
        return (
            <div className="counter">
                <button className="sub"
                    onClick={() => boundDecrement(id,value)}
                ></button>
                <span>{value}</span>
                <button className="add"
                    onClick={() => boundIncrement(id)}
                ></button>
                <button className="addIfOdd"
                    onClick={() => boundAddIfOdd(id,value)}
                ></button>
                <button className="addAsync"
                    onClick={() => boundAsyncAdd(id)}
                ></button>
            </div>
        )
    }

src\\component\\counter/counterPanel.js

import Counter from 'component/counter/Counter';
    
    export default function CounterPanel(props) {
        let { data, actions, panelName, addCounter } = props;
    
        const HasAllValue = data.length ? data.every(elt=> elt.value !==0)+'': null;
        const maxValue = data.length ? data.slice().sort((a,b)=>{b.value-a.value})[0].value:null;
        const allCountValue = data.length ? data.reduce((accu,elt)=> accu+elt.value,0):null;
    
        let HasAll = data.length ? HasAllValue : null;
        let max = data.length ? maxValue : null;
        let allCount = data.length ? allCountValue : null;
        return (
            <div className="counterBox" style={
       {margin: 40+'px'}}>
                <div className="panel">
                    <button className="addCounter"
                        onClick={()=>{addCounter(panelName)}}
                    ></button>
                    <div className="counterPanel">
                        {
                            data.map((elt)=>{
                                return (
                                    <Counter
                                        key={elt.id}
                                        {...actions}
                                        {...elt}
                                    />
                                    )
                            })
                        }
    
                    </div>
                </div>
    
                <div className="dashboard">
                    <div className="allSel line"><span className="key">HasAll:</span> <span className="val">{HasAll}</span></div>
                    <div className="maximum line"><span className="key">Maximum:</span> <span className="val">{max}</span></div>
                    <div className="allCount line"><span className="key">AllCount:</span> <span className="val">{allCount}</span></div>
                </div>
            </div>
        )
    }

[20190319101428849.png]: /images/20220303/87d26b215bc34053aa95882dc3563938.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220303/79a757ab5e6b47e38bfce3d5777eb86f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220303/55a99caeba44446ba0a7d0f61f5ebed0.png
[20190319105518770.png]: /images/20220303/5a1a0fa1ddc3440aa58bcb926a5ae4eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220303/322ae9b54488446e9571b1653425c7c8.png