Reduxライフコード#1

8160 ワード
テキストリンク

Redux


Reduxは中央管理システムとして便利であると理解している.

Reducer



state(カプセル化可能)への直接アクセスは許可されていないため、getterとsetterでアクセスします.しかし、setterの場合、setterを管理するのはreduceです.

reduceは、ステータスを入力値として受信し、actionを参照してsetterを作成する加工者です.

reduceの使用例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.js"></script>
</head>
<body>
    <style>
        .container {
            border: 5px solid black;
            padding: 10px;
        }
    </style>
    <div id="red"></div>
    <script>
        function reducer(state,action){
            if(state=== undefined){
                return{color:'blue'}
            }
        }
        var store = Redux.createStore(reducer);
        console.log(store.getState().color)
        function red(){
            document.querySelector('#red').innerHTML= `
                <div class="container" id="component_red" style="background-color: ${store.getState().color}">
                    <h1>red</h1>
                    <input type="button" value="fire" onclick="
                    document.querySelector('#component_red').style.backgroundColor='red';
                    ">
                </div>
            `
        }
        red();
    </script>
</body>
</html>
reduceはreduceの値を参照してstateの値を決定します(決定された値はstore値).reduceはactionとstateのパラメータ値を参照します.
SAP-標準階層
Hiveのよくあるカスケード求和演算思想解析