react-redux開発の実践と学習の共有

reduxの概要
reduxはjs状態管理のライブラリであり、fluxに基づいて開発され、fluxとの主な違いは1つのstoreのみであり、storeについては後述する.各フレームワークで使用可能であり、もちろん各フレームワークにもangularのngrx,vueのvuexのような独自の再パッケージされた状態管理ライブラリがあり、本稿では主にreactのreact-reduxを紹介する.
例の説明
今回のプレゼンテーションの例は、react-reduxによって主に実現したいマイクロメッセージ登録ページです.不正な登録情報を入力すると、上部にエラーメッセージが表示されます.すなわち、次のような機能があります.
ルートを介してホームフェースに入ります.ホームフェースでレンダリングされるdomコードは次のとおりです.

 render() {
        //            ，             this.props.children          
     const {msg} = this.props;
        return (
            

                
{msg.text}
                
{this.props.children}
            
        );
    }

ホームページは登録ページに直接書き込まれていないよりも、エラー・プロンプト部分とサブルーティング・エントリからなり、登録ページはサブルーティングによってネストされているが、reactのデータは遡及する能力(すなわち、単一のデータ・ストリーム)がないため、ここではステータス管理方式を選択してエラー・プロンプト情報を表示する.
react-rudexを開く
最初にドキュメントを見たとき、それぞれのモジュール(action,reducer,store)などがわかりましたが、具体的に機能を完成させたいときはぼんやりしていて、どうやって手をつけるか分かりません.そこで今回はもっと良い説明例をするために、私は必ず反対に、まず例から始めて、それらの概念を引き出します.
関連rudexとページコンポーネント-connect
以前のホームページのコードから分かるように、エラー情報の表示はコンポーネントのpropsから送られてきたが、ホームページはどのように関連するpropsを取得したのか、答えはconnectの関数を通じて行われている.

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

connectはreactコンポーネントがステータス管理を行うコアであり、コンポーネントとreduxのすべてのステータス値を接続します.この関数は、mapStateToProps、mapDispatchToProps、mergeProps、optionsの4つのパラメータを受け入れます.
mapStateToProps(state, ownProps)
最初のパラメータはreduxウェアハウスの値を取得する関数です.迅速な理解を容易にするために、jsのgetter、setterのgetterと簡単に考えることができます.これはreduxから値を取得するための関数です.この関数が返す値は、現在のコンポーネントのpropsで入手できます.
たとえば、現在のredux倉庫にエラー・プロンプトに関する情報が表示されているかどうかをホームページで知る必要があります.

const mapStateToProps = (state) => {
    return {
        msg: state.tipMsg,// reducer  tipMsg
    }
}

export default connect(mapStateToProps)(Main);

stateはreduxに値を格納する大きなオブジェクトであり,現在必要なエラー情報はtipMsgのフィールドに格納される.ホームページでは値のみが取られ、値は設定されないため、connectはこの関数だけで十分です.
ownPropsここでは2番目のパラメータを着用することもでき、2番目のパラメータは特に現在のコンポーネントのpropsを指し、情報の比較に使用することができる.この例は使用されません.
mapDispatchToProps(dispatch, ownProps)
mapStateToPropsがgetterである場合、mapDispatchToPropsはsetterであり、rudexが変更を記録したい状態と値を記録できるようにreduxに関する動作をトリガーします.
具体的には、この例では、redux動作をトリガする操作が登録ページにあるため、登録ページには次のコードが追加される.

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        showTip: showTip//   showTip   action
    }, dispatch);
}

export default connect((state) => state, mapDispatchToProps)(Main);

登録ページがshowTipの関数を実行すると、reduxのshowTipの操作がトリガーされ、この操作は事前に定義されていることがわかります.ここでは2つのshowTipがあり、1つ目は現在のページの関数名を指し、2つ目はreduxで定義された動作を指し、この2つのshowTipは必要なつながりはなく、関係マッピングとして名前が異なるだけである.
mergeProps(stateProps, dispatchProps, ownProps)
このパラメータの役割は、reduxのprops(すなわち、格納されている値)と現在のコンポーネントのpropsをマージすることを示し、デフォルトではマージされますが、このプロパティは無視できます.
options
コンフィギュレーション・アイテムのプロパティで、関連するコンフィギュレーションを行うことができます.自分で翻訳しましょう~.[options] (Object) If specified, further customizes the behavior of the connector.
[pure = true] (Boolean): If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps, preventing unnecessary updates, assuming that the component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. Defaults to true.
[withRef = false] (Boolean): If true, stores a ref to the wrapped component instance and makes it available via getWrappedInstance() method. Defaults to false.
store
これがこれまでお話ししてきたreduxの倉庫です.reduxの管理データはstoreに格納されます.storeはストレージウェアハウスであり、react-reduxはstoreが1つしかなく、すべてのものがここに存在していることを知っておく必要があります.reactコンポーネントで彼を使用するには、まずルートページに注入する必要があります.ルートノードに次のコードを書き込む必要があります.

import React from 'react'; 
import {render} from 'react-dom'; //        
import {Provider} from 'react-redux'; // react redux     ，    Provider
import store from './redux/store/store'; //   sotre
import route from './router/route'; //         

//      
render(
    
        {route}
    ,
    document.body.appendChild(document.createElement('div'))
);

これはreduxをリンクし、コンポーネントが倉庫にアクセスできるようにする基礎です.
action

export const showTip = (item) => {
    return {
        type: 'SHOW_TIP',
        item
    }
}

以前は登録ページで、関連条件が満たされていない場合はreduxの動作をトリガーしていました.この行為がactionですActionは,プロジェクトでトリガされる動作カテゴリを具体的に定義し,type属性によって異なる動作と区別する.connectに対応する関数パラメータは,mapDispatchToPropsがsaveに行く必要があるか,あるいはchangeがどのような行為をする必要があるかである.
reducer

const tipMsg = (state = {text: '', show: false}, action) => {
    switch (action.type) {
        case 'SHOW_TIP':
            return Object.assign({}, {
                text: action.item.text,
                show: action.item.show
            });
        default:
            return state;
    }
}

純粋な関数は、どのような動作であるかを判断することによって、関連するstateを変更します.この中には変数が含まれていません.つまり、入力を確定すれば、出力がわかります.mapStateToPropsという値取り関数では,相関reducerで返される値をとる.関連アクションをトリガーしたホームコンソール:
これでreact-reduxの親子コンポーネントに対する通信が完了し、サブコンポーネントから親コンポーネントに情報がプッシュされ、関連する操作がトリガーされる.
プロジェクトのアドレス:https://github.com/jiwenjiang...(ps:このプロジェクトはnpmではなくyarnによって管理されていることに注意してください)