初期認識react(3)reactでreduxを使用して簡略版カウンタを実現する

レビュー

初認識react(一)jsx構文と仮想DOMベール

を解く

初認識react(二)簡略版html+reduxを実現する.jsのdemo

初認識react(3)reactでreduxを用いて簡略カウンタ

を実現する.

react(4)reactにおける非同期ソリューションのredux-saga

を初めて認識する

初認識react(5)データストリーム究極のソリューションdva(ゼロ構成)

前の文章はすでにreduxの核心の概念を説明して理解して、ここはくだらない話ではありませんて、理解しないのは先に振り返ってみることができて、次にreactの中でどのようにreduxを使って、1つの簡単なカウンタを実現することを説明します
まずディレクトリ構造を組み立てる
次に、各ファイルの役割を説明し、実装します.

actions->counter.js格納カウンタの動作

reducers->index.jsは、reducerが複数ある可能性があるため、メインエントリファイルです.

reducers->counter.js格納カウンタのreducer

action-types.jsはマクロを保存して、ゲームをするのはきっと知っていて、動作のタイプを保存します

store->index.jsはstore全体が外部に露出するエントリファイル

である.
前の文章を読んだ後、このようなディレクトリ構造については具体的な役割が分からないかもしれませんが、これらのreduxの概念はすでに理解されているに違いありません.次は1つのファイルで説明します.
一、store部分の作成
1、最も簡単なstore/action-typesを書く.jsファイル

はマクロファイルで、カウンタ動作を保存するタイプで、はっきり言って加算、減算操作です.コードを貼って見るより具体的な

// action-types
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";

マクロファイルは必須ではありませんが、構造が明確で、カウンタのすべての動作のタイプが一目でわかります.
2、reducers/counterを書く.jsファイル

はカウンタのreducerで、reducersディレクトリの下には多くのreducerがある可能性があります.まず

と書きます.

import * as Types from "../action-types"; //      
let initState = {  //         
    number:0
};
function counter(state = initState, action) {   //  state action    ,  state     
    switch (action.type) {  //      
        case Types.INCREMENT: //action      {type:'INCREMENT'，count:5}
            return {number:state.number+action.count};
        case Types.DECREMENT:
            return {number:state.number-action.count};
    }
    return state    
}
export default counter

前の文章で書いたreducerにそっくりですが、構造をはっきりさせます.
3、reducers/indexを書く.jsファイル

カウンタのreducerが1つしかないので、デフォルトでエクスポートできます.複数のreducerがある場合は、このファイルをマージし、後で説明します.

import counter from "./counter"; //    reducer
export default counter      //    

くどくど言うと、主に後で複数のreducerを拡張しやすいため、reducers/indexがある.jsというプライマリファイル
4、actions/counters.js

は、アセンブリにおいて

を呼び出すために送信された動作を抽出する.

import * as Types from "../action-types"; //   
let actions = {
    add(num){ //add          ，  action  
        return {type:Types.INCREMENT,count:num}
    },
    minus(num){
        return {type:Types.DECREMENT,count:num}
    }
};
export default actions

5、store/indexを書く.js、倉庫のメインファイル

このファイルは主にstoreをエクスポートするために使用され、

を使用してコンポーネントに提供されます.

import {createStore} from 'redux';
import reducer from "./reducers"
let store = createStore(reducer); //  store
export default store;

これまでstoreファイルはすべて書き終わった.次に、コンポーネントの部分を書き始め、倉庫のデータをコンポーネントに使用させます.
二、コンポーネント呼び出し部分
1.reactのメインエントリファイル、すなわちsrc/indexを作成する.js

react-reduxライブラリを使用してstoreとコンポーネント間の通信

を実現する

react-reduxは2つのコアAPIを提供し、Providerはconnectリンク

を提供する.

Providerは、reactエントリファイルでstoreを提供するためのコンポーネントです.

connectは、reactコンポーネントの内部にstoreを接続することを意味し、さらにコンポーネントとreduxとの間の通信

を実現する.
道理で私はみんなにはっきり言えないので、私たちはやはりコードを見て説明します.

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from "./components/Counter";
import store from "./store";
//  react-redux  Provider  ，  
import {Provider} from "react-redux";

ReactDOM.render(
    
        

            
        
    , document.getElementById('root'));

2、Counterコンポーネントの作成

コンポーネントではconnectメソッドが用いられ,コンポーネントとredux間の通信が実現され,connectメソッドは2パラメータを受け入れる.connect(mapStateToProps,actions)(Counter)

store/actions.jsがエクスポートしたオブジェクトはコンポーネントの属性にバインドされ、コンポーネント内部はthisを通過することができる.props対応actions

を入手

import React from "react";
import store from "../store";
import * as Types from "../store/action-types"
//  action       actionCreator
import actions from "../store/actions/counter";
import {connect} from "react-redux";
class Counter extends React.Component {
    render() {
        console.log(this.props);
        return (
            

             
{this.props.number}
                {
                    this.props.add(5)
                }}>+
                {
                    this.props.minus(1)
                }}>-
            
            )
    }
}
let mapStateToProps = (state)=>{ //state   store.getState()
    return {...state}
};

export default connect(mapStateToProps,actions)(Counter)   

ここまで、カウンタ機能を基本的に実現し、まずテストし、ワークフロー全体を整理します.
テストクリックで記数を増やす機能
機能の基本的な実現は、プロセス全体に対してどのように実現するか分からない可能性があります.次に、ワークフロー全体を整理します.
react-reduxプロセス全体の分析

ボタンをクリックするとthisがトリガーされる.props.add(5)、返されるactionである{type:Type.INCREMENT,count:num}は、connect内部で

が配布されます.

配布動作後にreducerにより処理され、新たな状態

に戻る.

ページ更新

最後に図の最後に

より多くの良質な文章は

を参照してください.

reduxすべてのソースコード解析スタンプここで