どのようにセットアップReduxの反応と

Reduxは、おそらく最も反応するための最も人気のあるグローバル州管理ライブラリです.それはprop-drillingの問題を排除し、スケーラブルな方法でアプリケーションの状態を管理することができます.
それは十分な導入、今反応プロジェクトでそれを設定することができます!
注:この記事は、あなたがReduxの基礎を理解すると仮定します.そうでなければ、前進する前にredux documentationをチェックしてください.
このブログの目的は何ですか?
を理解し、古典的なカウンタの例を使用してreduxを使用してCRA.
ボーナスセクションでは、最後にお待ちしております!
このブログの最終結果をhereからクローンできます.

ステップ1：セットアッププロジェクト

あなたは反応プロジェクトを設定することができますし、自分の代わりにBabel、WebPackを設定することができますまたは代わりに、反応プロジェクトを回転させるためにcreate-react-appを使用することができます、それは確かに我々が今するつもりです.

    $ npx create-react-app my-react-redux-app

上記のコマンドを端末/コマンドプロンプトに入力します.この前に、あなたのマシンにインストールされているnodeの最新バージョンがあることを確認してください.
ここでは、私の反応Reduxアプリは、プロジェクトフォルダの名前です.

    $ cd my-react-redux-app

    $ npm start

今すぐ私の反応Reduxアプリにディレクトリ(CD)を変更し、スタート(NPMの起動)は、サーバーのターミナル/コマンドプロンプトで入力してください.
とVoila!反応プロジェクトは、現在セットアップです.ブラウザに次のような画面が表示できます.

ステップ2：RedUxをインストールし、Redux

    npm install redux react-redux

or

    yarn add redux react-redux

パッケージをインストールしたので、セットアップを続行できます.
react-redux我々は簡単に我々の反応アプリケーションとRedUxを接続することができます.

ステップ3：あなたのインデックスのセットアップReduxストア。js

この手順では、すべてのコンポーネントの親の反応プロジェクト階層内の最上位コンポーネントを変更します.これが一番上のコンポーネントの上でこのステップをすることは重要です、これは我々のRedux Storeがすべての構成要素に利用可能であることを保証します.
インデックス.JSは次のようになります.

    --------------------------- index.js ---------------------------


    import React from 'react';

    import ReactDOM from 'react-dom';

    import './index.css';

    import App from './App';

    // REDUX

    import { Provider } from 'react-redux';

    import store from './redux/store';

    ReactDOM.render(

      <Provider store={store}>

        <React.StrictMode>

          <App />

        </React.StrictMode>

      </Provider>,

    document.getElementById('root'),

    );

ここでは、我々は反応Reduxから“プロバイダ”と呼ばれる何かをインポートしている.
'プロバイダー'は、私たちに反応Reduxライブラリによって提供されるコンポーネントです.それは私たちのコンポーネントをラップします.あなたが見ることができるように、ストア(それは我々のRedux店です)と呼ばれている小道具も受け取ります.

Before moving ahead, just for the sake of keeping our project structure organized, we will create a folder named redux in our src folder, and all of our redux specific code/logic will be inside this folder. This way we are making our project easy to read, test and scalable when the need arises.

Now let's create our store.

ストアという名前のファイルを作成します.内部のJSsrc/reduxディレクトリ.( path -./src/redux/store . js )

    ------------------------- ./src/redux/store.js ---------------------


    import { createStore } from 'redux';

    import rootReducer from './rootReducer';


    const store = createStore(rootReducer);


    export default store;

ここでは、reduxからcreatestore ()関数を使用して、ストアを作成します.(説明は少し冗長でした)😜 名前自体が静かな自己説明です.我々はまた、まだ我々がまだ作成していないRootreducerと呼ばれるファイルをインポートしていることがわかります.

create a file named rootReducer inside the same directory as the store (i.e. path — ./src/redux/rootReducer.js)

    --------------------- ./src/redux/rootReducer.js -------------------

    import { combineReducers } from 'redux';


    import counterReducer from './Counter/counter.reducer';


    const rootReducer = combineReducers({

        counter: counterReducer,

    });

    export default rootReducer;

ここで、名前としてのCombinerEducator ()は、様々な減速器を一つの縮小器に結合します.reduxでは、我々は多くの減速を作成することができます.どんな他の動作にも依存しないあらゆる操作のために新しい縮小を作成することは理想的です.createstore ()はストア内です.JSは1つのリダクションを取ることができます.したがって、CombinerEducator ()は複数の減速器を1つに変換するために使用されます.
これによって、我々は成功したRootReducerを作成しましたが、我々は我々が再び作成されていない😗. 私は知っている、それは少し退屈ですが、私を信頼し、そこにハングアップ知っている!あなたはreduxを設定しながら、一度だけこれを行う必要があります.設定が完了すると、そこから非常にスムーズな経験があります.
カウンター減速は、我々がスタートで話したカウンターの例のための還元器機能です.次のステップから、我々は我々の反例を実行し始めます.

ステップ4：セットアップカウンター減速/アクション/タイプ

まず最初に、私たちのreduxフォルダ(path -./src/redux/counter)でカウンターと呼ばれるフォルダを作成しましょう.
カウンターフォルダの中に3つのファイルを作りましょう

カウンター.種類JS

カウンター.アクション.JS

カウンター.還元剤JS

ファイル名は、彼らが意味するもののかなり自明です.(下記のコメント欄では、この件について混乱があればお知らせください)
カウンタのために我々のタイプを最初につくりましょう.私たちは2つのタイプを必要とするでしょう.

    --------------- ./src/redux/Counter/counter.types.js ---------------

    export const INCREMENT = 'INCREMENT';

    export const DECREMENT = 'DECREMENT';

ここでは、他のファイルでインポートできるように、両方の定数をエクスポートします.
次に、カウンターのアクションを作成しましょう.

    --------------- ./src/redux/Counter/counter.actions.js -------------


    import { INCREMENT, DECREMENT } from './counter.types';


    export const increaseCounter = () => {

        return {

            type: INCREMENT,

        };

    };

    export const decreaseCounter = () => {

        return {

           type: DECREMENT,

        };

    };

ここでは、我々はカウンターから我々のタイプを輸入します.種類JSファイルは、それぞれのアクションの型として渡す.
さあ、カウンターの例に還元剤を作りましょう.

    ------------------ ./src/redux/counter.reducer.js ------------------


    import { INCREMENT, DECREMENT } from './counter.types';


    const INITIAL_STATE = {

        count: 0,
    };

    const reducer = (state = INITIAL_STATE, action) => {

        switch (action.type) {

            case INCREMENT:

               return {

                 ...state, count: state.count + 1,

               };

            case DECREMENT:

               return {
                  ...state, count: state.count - 1,

               };

             default: return state;

        }

    };

    export default reducer;

ここではまず、我々のタイプを先頭にインポートします.そして、この特定の減速機のデフォルト状態になるでしょう.この後、2つの引数-状態、アクションを取る還元子と呼ばれる関数を作成します.状態はInitialRank状態の初期値をとり、アクションは我々のアクション作成者からカウンタから渡されるデータ(ペイロード)を受け取る.アクション.jsファイル.
還元機能の中で、JavaScriptからswitch-caseを使用し、それぞれのケースの中で、更新された状態を返します.我々は、spread operator (…)を使用して状態を我々の新しいオブジェクトにコピーして、我々が州で変化したいものを加えます.

⚠️ Always remember: We never mutate the original state! Every time we have to make a change we return a new state object.

そして、最後に、我々はそれからCount Rootreducerで輸入される我々の還元剤を輸出します.jsファイル.
これで、カウンタのための我々の縮小は準備ができています!次のステップ以降から我々のWebアプリケーション上でインクリメントとデクリメントボタンを表示するためにいくつかのJSXを書きます.

ステップ5 :インクリメント/デクリメントボタン

我々のWebアプリでreduxの使用を示すために我々はWebアプリケーション上で何かを表示する必要があります.それで、我々は若干の基本的なJSXを書いています、そして、その後、我々はそれを我々のRedux店とつなぎます.

Let's open the App.js file (path — ./src/app.js)

既存のBoilerPlateコードをあなたのアプリケーションで次のように置き換えてください.js

    -------------------------- ./src/App.js ----------------------------

    import React from 'react';

    import './App.css';

    function App() {

    return (

      <div className='App'>

         <div>Count: 0</div>

         <button>Increase Count</button>

         <button>Decrease Count</button>

      </div>

     );

    }


    export default App;

ここでは、ちょうど何もしない2つのボタンを追加していると我々は静的なカウント値を表示します.
これはあなたのブラウザで見ることができるものです
さて、次の手順でRedux状態とアクションをこのコンポーネントに接続しましょう.

ステップ6 : redux状態/アクションをコンポーネントに接続する

他のすべてが設定されているので、最後のステップは、コンポーネントのredux状態とアクションを使用することです.

import React from "react"

import "./App.css"

import { connect } from "react-redux"

import {
  increaseCounter,
  decreaseCounter,
} from "./redux/Counter/counter.actions"

function App(props) {
  return (
    <div className="App">
      <div>Count: {props.count}</div>

      <button onClick={() => props.increaseCounter()}>Increase Count</button>

      <button onClick={() => props.decreaseCounter()}>Decrease Count</button>
    </div>
  )
}

const mapStateToProps = state => {
  return {
    count: state.counter.count,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    increaseCounter: () => dispatch(increaseCounter()),

    decreaseCounter: () => dispatch(decreaseCounter()),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

ここでは、我々は反応reduxライブラリからの接続機能をインポートする、また、私たちの拡張機能と減算処理をインポートします.
Connect関数はHigher Order Component (HOC)です.基本的にはコンポーネントを受け取り、さらにプロップを追加し、新しく追加された小道具と同じコンポーネントを返します.アプリの最後の行を確認します.コンポーネントをエクスポートするJSファイルは、以下のように接続が使用されていることがわかります.

export default connect(mapStateToProps, mapDispatchToProps)(App)

connectは、MapstateToPropsとmapDispatchToPropsである引数として2つの関数をとります.
では、これら二つの関数が何をしているかを見てみましょう.

const mapStateToProps = state => {
  return {
    count: state.counter.count,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    increaseCounter: () => dispatch(increaseCounter()),

    decreaseCounter: () => dispatch(decreaseCounter()),
  }
}

名前としてMapStateToProps関数は、それが宣言されているコンポーネントの小道具にredux状態をマップすることを暗示します.したがって、これは基本的にこの関数から戻る状態をコンポーネントに追加します.私たちのカウンタの例では、私はredux状態からカウントを返しているので、今私はアプリのコンポーネント内の小道具からカウントにアクセスすることができます.
MapDispatchToProps関数は非常に類似したことを行いますが、プロップに状態を追加する代わりに、我々のアクションを小道具に加えます!この関数から戻るアクションは、コンポーネントに追加されます.そして、私たちの例では、私は2つの行動I . E増加ElectroecounterとDeciecounterを返しました.したがって、我々は我々の小道具から彼らにアクセスすることができます、そして、そして、私は各々のボタンクリックの上で我々の行動をリリースします.
これで我々は完全に機能ReReXアプリケーションを反応させる!あなたがブログが好きであるか、どんな質問もするならば、コメントで知らせてください!

ボーナス：プロジェクトにredux devツールを追加する

First, Download the chrome browser redux extension from here

Second, install the redux dev tools package from npm to your project, using the following command,

    npm install --save redux-devtools-extension

Third, update your store.js to use the composeWithDevtools as follows,

    ------------------------- ./src/redux/store.js ---------------------


    import { createStore } from 'redux';

    import { composeWithDevTools } from 'redux-devtools-extension';

    import rootReducer from './rootReducer';


    const store = createStore(

        rootReducer,

        composeWithDevTools(),

    );


    export default store;

そして、それ!今、あなたはReduxのクロムdevのツールにアクセスすることができます!
Redux用のChrome Devツールは以下のようになります.

このブログの最終結果をhereからクローンできます.
記事を読んでくれてありがとう!私は、それが若干の価値を加えたことを望みます😊.
私は新しい記事を投稿するとすぐに更新を得るために私に従うことができるだけで私の考えをさえずる!シーヤー!