Redux反応:速い『フードの下で』

何がreduxですか？

Reduxは、アプリケーションの状態を管理するための人気のJavaScriptライブラリです.反応アプリケーションの60 %のような何かがReduxを使用するので、あなたは少なくともそれを聞いたかもしれません.Reduxは1つの場所でのすべてのプロジェクトの状態を置きます.これはreduxの主なユースケースであり、問題が解決しているのはデータの通過と頭痛の難しさを示すことです.たとえば、親コンポーネントが2つの子コンポーネントを持っている場合、これらのコンポーネントは同じsateを使用して共有します.一般的にこれを持ち上げることによって解決することができます-ので、2番目の子コンポーネントからアプリケーションに状態を持ち上げる.JSファイルは、一度そのトップレベルでは、この状況では3 ' rdコンポーネントの状態を使用することができます.多くの州が多くの異なった構成要素で使用される必要があったはるかに大きい、そして、複雑なアプリケーションで働いているとき、この単方向流れは問題を起こします.

ストアと呼ばれている何かがreduxで我々の州を管理するので、構成要素は州の変化を店に派遣することに集中しているだけです、そして、店は「真実の単一の源」の優れた例です.興味深いことにreduxは、この不変性の品質を持っています-それは私たちは、状態オブジェクトとその小道具自体を変更しないと言うの空想的な方法ではなく、reduxは、新しいオブジェクトを作成し、新しいアプリケーションの状態を計算し、新しく作成されたオブジェクトを更新します.あなたはなぜすべてのこのトラブルを通過するのか、あなたの前の州が貴重な情報であることに注意するのは重要です.
RedUxの状態は「読み取り専用」で、我々はそれを変更することはできません.状態を変更する唯一の方法は、何かが起こったことを記述しているオブジェクト、動作を派遣することです.
ストアオブジェクト自体はそれが可能であることを考慮した非常に小さなAPIを持っています

ストア.派遣(行動)

ストア.subscibe(リスナー)

ストア.getstat ()

Replacereducer ( Nextducer )

設定されていない状態のメソッド.それは確かです.dispatch ()メソッドはほぼ確実にここで把握することが重要です.このメソッドは、アクションとして知られているReduxにオブジェクトを送信します.典型的には、アクションは、状態を更新するために使用される他のデータと共に「型」を運ぶ「ペイロード」として記述することができる.
Reduxを理解するために重要な第三の主要概念
変更は純粋な関数
Reduxは、アプリケーションが直接状態の変更を行うことを許可しないということを理解しています.還元器は私が意味する純粋な機能だけです、彼らはあなたが派遣された行動が何であったかについて扱うために書くという機能で、アプリケーション状態がどう変わるか定義します.一般的なデータフローは次のように表現できます.

*反応Reduxセットアップ*クイック概要**
インストール

//create new react app
$ npm install -g create-react-app
$ create-react-app < APP-NAME >

//(optional) install Yarn
$ npm install --global yarn

//install redux  
$ npm install redux
$ npm install react-redux

まず、店を作る

import { createStore } from 'redux'
createStore(reducer, [preloadedState], [enhancer])

どのように、我々は店にアクセスしますか?何かプロバイダと呼ばれるアプリをラップするつもりです.

import { Provider } from 'react-redux'
  <Provider store={store}>
  </Provider>,
)

アクセス*{{ } }をインポートする必要がありますので、コンポーネントをエクスポートするときにConnectでエクスポートします.

import { connect } from 'react-redux';
export default connect(mapStateToProps, mapDispatchToProps)(ComponentName);

最後の大きいもの** mapstatetoprops ***または* mapdispatchtoprops **
例えばパンダを使用しましょう.

const mapStateToProps = (state) => ({ pandas: state.pandas })

const mapDispatchToProps = (dispatch) => {
  return {
    createPanda: (panda) => dispatch({ type: 'CREATE_PANDA', character }),
  }
}

我々が上に持っているものを考えれば、私たちは単に店に情報を得るために必要な方法と、道に沿ったステップを例示しました.あなたがRedUXについて聞く' cons 'のいくつかは、それがちょうどreduxを利用して終わることを望むことを始めるためにボイラープレートコードの重大な臨界質量を必要とするということです.あなたのアプリケーションを十分に十分な機能をreduxに提供する必要が完全に有利になると思うなら、私は非常にreduxを使用することをお勧めします.