私が5であるようにreduxを説明してください!

TLLDは:Reduxは、それが組織を維持するためのプロジェクトに追加することができます州管理ライブラリです.ここにいくつかのリンクがあります.Redux.js.org , github repo , またはチェックアウトCode Sandbox
やあ、私はブリトニーです、そして、私は100以上のインストラクターですZTM Academy そして所有者、デザイナー、開発者bDesigned . 私によってより多くのdevのメモを見つけることができますConsole Logs .

何がreduxですか？

Chinum Chenhchen RedUxは、アプリケーションの状態を管理するのに役立つツールです.我々が我々のおもちゃの全てを保つ箱として州を考えてください.我々のおもちゃで遊ぶために、我々は彼らを見つけることができるように、彼らを組織させ続けなければなりません.Reduxあなたの状態を整理し、1つの場所に保持します.また、彼らが破壊するのが難しいように、我々のものが保護されていておきます.多くの開発者はReduxは別のJavaScriptライブラリであるReactionでのみ使用できると考えがちですが、実際にはどんなビューライブラリと一緒にも実行できます.Reduxはわずか2 KBの小さな体重と常にそれを改善し、それに追加している人々の大規模なグループを持っています.

フラックスパターン

データの一方向または一方向の流れに従う.これは、ビューでは、画面上のアイテムは、ユーザーがアプリケーションを訪問するときに見て起動します.ユーザーがボタンをクリックするか、何かをタイプするならば、我々は何かが起こると思っています.これはアクションと呼ばれ、アクションが発生すると、ユーザーに表示される内容を変更する必要があります.これを行うには、reduxいくつかの手順を通過しています.これは、ユーザーが我々のアプリケーション内のアクションを行うときに起動します.そのアクションは、それは減速機能を介して送信するための単なるファンシーな言葉です.還元器は、1つの最終のオブジェクトに起こることができた倍数物を単に凝縮して、ユーザーに送り返す.それは純粋な機能である必要があります、あなたが同じことを入力するたびに、あなたは常に同じ結果を返さなければなりません.還元剤は、それから新しい凝縮したオブジェクトを店に戻します.その店は私たちの箱で、状態を保持しています.その後、状態を更新し、ビューに更新することができます.今、ユーザーは彼らが画面上で期待を見ている!

なぜRedux？

プロジェクトにReduxを追加する理由がいくつかあります.

大きな状態を管理するために良い.

コンポーネント間のデータ共有に便利です.

予測可能な状態管理.

これらの3つの原則を使用することによって、Reduxは本当によくこれらの3つのことをします:

1つの真実のソースを持つ、アプリケーションの状態全体を記述する単一の大きなオブジェクト.

2 .状態は読み取り専用またはimmutableです、各アクションは状態の新しいバージョンを作成します.

3 .純粋関数を使用して状態を変更するだけで、同じ入力を与えた関数は常に同じ出力を持つ.

Reduxから始める

Chinum - Chinaを使用します.Reduxをインストールするにはnpm i redux を使用している場合yarn add redux あなたが糸を使うならば.あなたが反応アプリケーションにいるならば、同様にインストールされる必要がある反応Reduxと呼ばれている別々のパッケージがあります.あなたがタイプする反応Reduxをインストールするにはnpm i react-redux NPMまたはyarn add react-redux 糸用.実際には、Reduxを含む作成反応アプリのテンプレートです.両方の反応とreduxを実行して新しいアプリケーションを起動するにはnpx create-react-app my-app-name --template redux .

反応Reduxの設定

あなたがプロジェクトにReduxを追加したい反応の上で実行しているプロジェクトを持っているならば、あなたはあなたのアプリを変換することに関係している若干のセットアップがあります.あなたは両方のReduxを追加する必要がありますあなたのアプリケーションにReduxパッケージを反応させる.Reduxが持っている反応<Provider /> コンポーネントは、アプリケーションがReduxストアにアクセスすることができます.あなたはあなたのsrc/index.js ファイルとあなたの周り<App /> コンポーネントをラップします.

import React from "react";
import ReactDOM from "react-dom";

import { Provider } from "react-redux";
import store from "./redux/store";

import Connect from "./Connect";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <Connect />
  </Provider>,
  rootElement
);

今はまだ私たちの店を作っていないので、次のようにしましょう.誰でも、彼らがアプリケーションをつくるとき、彼らが好きである彼ら自身のフォルダ構造を持っているようです.あなたがファイルをインポートして、エクスポートするあなたの理解をより快適であるならば、あなたのために最もよく働く方法を見つけるために自由に感じてください.あなたのsrc あなたの反応アプリケーション内のフォルダreduxと呼ばれる新しいフォルダを作成し、その内部の作成store.js . ストアの内部.JSは、我々が我々のRedux店をつくって、それを減速器とつなぐところです.私たちはredux、我々がまだ作成していない私たちのrootreducer、およびAsync関数を処理するいくつかのミドルウェアパッケージからCreateStoreとAppleMiddlewareをインポートする必要があります.また、我々のアプリにredux thunkとreduxロガーをインストールする必要があります.用途npm i redux-thunk redux-logger NPMとyarn add redux-thunk redux-logger 糸用.reduxからのcreatestore関数は3つのオプション引数を取ります.

1還元子-任意のアクションを1つの新しい状態ツリーに減らし、次の状態オブジェクトを返す関数です.

2 .[ preloadedstate ]-初期状態またはデフォルト状態.

3 .エンハンサー-オプションでミドルウェアや他のサードパーティ製の機能を持つストアを強化する.reduxは1つのエンハンサー、AppleMiddleware ()だけで動作します.
このアプリでは、我々の初期状態は、還元子ファイルの内部に作成される予定ですので、我々はpreloadedstateを持っていません.

import { createStore, applyMiddleware } from 'redux'

// middleware for async reducers
import thunkMiddleware from "redux-thunk";
import { createLogger } from "redux-logger";

// reducer file we have not created yet
import { rootReducer } from './reducers.js'

const logger = createLogger();

// from redux call createStore(reducer, [preloadedState], [enhancer])
const store = createStore(
  rootReducer,
  applyMiddleware(thunkMiddleware, logger)
);

export default store

我々が我々の店をつくった今、我々は我々の行動オブジェクトをつくります.フォルダ内に新しいファイルを作成するactions.js . あなたのアプリケーションの成長として、これはどこで別のファイルごとに別のアクションを使用してフォルダを作成することを選ぶ可能性がありますです.これは小さなアプリケーションですので、私は1アクションに入れています.jsファイル.それぞれのアクションは、起こったイベントと現在の状態のコピーを受け取ります.その後、ペイロードまたはデータを更新し、状態の更新コピーを返します.また、ファイルを作成する必要がありますconstants.js すべての型の定数を追跡し、私たちの行動にインポートします.jsファイル.定数.jsファイルはオプションで、アクションタイプの定数名のすべてを保持するのは、より大きなアプリケーションでの一般的な慣習です.

// constants.js
export const CHANGE_SEARCHFIELD = 'CHANGE_SEARCHFIELD';
export const REQUEST_ROBOTS_PENDING = 'REQUEST_ROBOTS_PENDING';
export const REQUEST_ROBOTS_SUCCESS = 'REQUEST_ROBOTS_SUCCESS';
export const REQUEST_ROBOTS_FAILED = 'REQUEST_ROBOTS_FAILED';

// actions.js
import {
  CHANGE_SEARCHFIELD,
  REQUEST_ROBOTS_PENDING,
  REQUEST_ROBOTS_SUCCESS,
  REQUEST_ROBOTS_FAILED
 } from './constants'


export const setSearchField = (text) => ({ type: CHANGE_SEARCHFIELD, payload: text })

export const requestRobots = () => (dispatch) => {
  dispatch({ type: REQUEST_ROBOTS_PENDING })
  const apiCall = (link) => fetch(link).then(response => response.json())
  apiCall('https://jsonplaceholder.typicode.com/users')
    .then(data => dispatch({ type: REQUEST_ROBOTS_SUCCESS, payload: data }))
    .catch(error => dispatch({ type: REQUEST_ROBOTS_FAILED, payload: error }))
}

今、我々は還元剤を作る必要がある.ここでは、おそらく私たちは先に行くとreduxフォルダ内の還元器と呼ばれる新しいフォルダを作成する必要があります.次に、各アクションリダラーのファイルを作成します.創作したposts.js , comments.js , and rootReducer.js , この関数は、すべての関数を1つの関数に結合します.今、我々は還元機能を書く必要があります.投稿で.JSは、私たちの古い状態を取り、それを更新したバージョンを作成します.コメントで.js

import {
  CHANGE_SEARCHFIELD,
  REQUEST_ROBOTS_PENDING,
  REQUEST_ROBOTS_SUCCESS,
  REQUEST_ROBOTS_FAILED
} from "./constants";
import { combineReducers } from "redux";

const initialStateSearch = {
  searchField: ""
};

export const searchRobots = (state = initialStateSearch, action = {}) => {
  switch (action.type) {
    case CHANGE_SEARCHFIELD:
      return Object.assign({}, state, { searchField: action.payload });
    default:
      return state;
  }
};

const initialStateRobots = {
  robots: [],
  isPending: true
};

export const requestRobots = (state = initialStateRobots, action = {}) => {
  switch (action.type) {
    case REQUEST_ROBOTS_PENDING:
      return Object.assign({}, state, { isPending: true });
    case REQUEST_ROBOTS_SUCCESS:
      return Object.assign({}, state, {
        robots: action.payload,
        isPending: false
      });
    case REQUEST_ROBOTS_FAILED:
      return Object.assign({}, state, { error: action.payload });
    default:
      return state;
  }
};

// take the 2 reducer functions and combine into 1
export const rootReducer = combineReducers({
  requestRobots,
  searchRobots
});

更新：接続アプリ

私は、アプリのコンポーネントをクラスから機能的なコンポーネントに変換してアプリを接続するフックを使用して推奨されたフックAPIを使用するために、Chinum Chinese .私は以下に説明された古い方法を残して、それをCode Sandbox だから、両方の方法を見ることができます.
私たちのアプリをフックを使用して接続するにはsrc/App.js . まず、使用するフックをインポートする必要があります.

UseEffect -反応からの方法

UseDispatch - Recovery Reduxからのメソッド.

USESelector反応Reduxからの方法

UseEffectフックは、コンポーネントをマウントする機能を置き換えて、ロボットを読み込む必要があります.OperDispatchesとUserSelectorはRetrixコンポーネントのMapStateToProps関数とMapDispatchToProps関数に置き換えます.

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setSearchField, requestRobots } from "./redux/actions";
import "./styles.css";

// components
import CardList from "./components/CardList";
import SearchBox from "./components/SearchBox";
import ErrorBoundary from "./components/ErrorBoundary";

const App = () => {
  // replaces mapDispatchToProps
  const searchField = useSelector(state => state.searchRobots.searchField);
  const robots = useSelector(state => state.requestRobots.robots);
  const isPending = useSelector(state => state.requestRobots.isPending);

  const filteredRobots = robots.filter(robot => {
    return robot.name.toLowerCase().includes(searchField.toLowerCase());
  });

  // replaces mapDispatchToProps
  const dispatch = useDispatch();

  const onSearchChange = e => dispatch(setSearchField(e.target.value));

  useEffect(() => {
    dispatch(requestRobots());
  }, [dispatch]);

  return (
    <div className="body">
      <div className="stickyHeader">
        <h1 className="f1">RoboFriends</h1>
        <SearchBox searchChange={onSearchChange} />
      </div>
      {isPending ? (
        <h1>Loading</h1>
      ) : (
        <ErrorBoundary>
          <CardList robots={filteredRobots} />
        </ErrorBoundary>
      )}
    </div>
  );
};

古い方法：アプリケーションを接続します

私たちは私たちのアプリを接続しています.Srcフォルダーで、connectという新しいコンポーネントを作成します.jsで接続します.JSは、我々は反応Reduxから接続をインポートし、2つの機能を設定する必要があります:mapstatetopropsとmapdispatchtoprops.MapStateToPropsでは、すべての子供のコンポーネントに状態またはストアへのアクセスを与えている.MapDispatchToPropsでは、イベントを正しいアクションに送信します.

import { connect } from "react-redux";
import { setSearchField, requestRobots } from "./redux/actions";
import App from "./App";

const mapStateToProps = state => ({
  searchField: state.searchRobots.searchField,
  robots: state.requestRobots.robots,
  isPending: state.requestRobots.isPending
});

const mapDispatchToProps = dispatch => ({
  onSearchChange: event => dispatch(setSearchField(event.target.value)),
  onRequestRobots: () => dispatch(requestRobots())
});

// we take the 2 functions and connect them to our App component
const Connect = connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

export default Connect;

最後に、我々のアプリは完全にReduxに接続されて!これは、我々の最終的なフォルダ構造です.

-public
-src
  -components
    -Card.js
    -CardList.js
    -ErrorBoundary.js
    -SearchBox.js
    -component-styles.css
  -redux
    -actions.js
    -constants.js
    -reducers.js
    -store.js
  App.js
  Connect.js
  index.js
  styles.css
package.json

残りのコンポーネントのコードを見つけることができますhere またはチェックアウトCode Sandbox . 私に参加してくれたおかげで、それがあなたを助けたならば、記事が好きであることを忘れないでください!