ゼロからビルド独自のredux

Reduxは、それが単一のオブジェクト上のアプリケーション全体の状態の生活を意味する単一のオブジェクト内のアプリケーションの状態を管理するのに役立ちますので、反応アプリの状態のマンガライブラリです.
あなたがReduxストアを接続しようとすると、いくつかのボイラープレートのセットアップをあなたの反応アプリを頻繁に時々混乱する必要があります.
だから、我々はそれをゼロから書く理由です.
ストアを作成します.あなたの反応アプリでJSファイル.
まず、ディスパッチ機能、購読機能、thunk関数を作成する必要があります
< div >
< p > 1getstate関数は、アプリケーションの現在の状態を取得するのに役立ちますbr/>
2 thunkはネットワークリクエストを遅らせることができるAysncを行うために使用されます.p >
< p >還元子を作成します.JSファイル< br/>
<> P >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/saigowthamr/52f707d08c06a744cbf3df93e9b4c67e.js//>
< div >

減速機

私たちが行動を送るとき、それは古い状態を変異するのではなく、新しいAPP状態を与えますp >

どのように反応アプリに我々のreduxを接続するには？

インデックスを開きます.JSファイルとインポートは、下記のコードのようにストアに接続されているストアから購読しますbr/>
<> P >
クラスをハイライト表示する

import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";
import { subscribe } from './store';

subscribe(()=>render(
  <App />,
  document.getElementById("root")
))

< div >
< tt >カウンタとTODOを実装し、ネットワークのリクエストを送信しましょう.p >
<藤>JSファイル

< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/saigowthamr/b923a643d6e9e674f810871a69c8a6e5.js//>
< div >
上のコードでは、最初にgetstateとdispatchをインポートしました.p >
< tt >追加のToDoボタンをクリックすると、ペイロードでアクションの型をディスパッチします.p >
カウンターボタン.JSファイル< br/>
<> P >
クラスをハイライト表示する

import React from "react";
import {dispatch} from './store'

function Inc() {
    dispatch({
        type: 'INC'
    })
}
function Dec() {
    dispatch({
        type: 'DEC'
    })
}

const width = { width: '2rem' ,fontSize:'1.2rem'}

const CounterButtons= () => (
  <div>
    <button onClick={Inc} style={width} >+</button>
    <button onClick={Dec}  style={width} >-</button>
  </div>
);

export default CounterButtons;

< div >
< tt > thunksを使ってネットワークリクエストを送信する時間です.p >
< tt > thunksを作成します.JSファイル< br/>
<> P >
クラスをハイライト表示する

import { dispatch, thunk } from "./store";
import axios from "axios";

export const users = () => thunk(
    function (res) {
        dispatch({
            type: "GET_USERS",
            users: res.data
        });
    }, (cb) => {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => cb(response)) 
            .catch(err => cb({ err:'Error occurred'}))
    },5000 //delay time
)

< div >
thunk関数は三つの引数を取ります.最初の2つはコールバック関数last < br/>です
引数は遅延で、オプションです.p >
最初のコールバック関数では、アクションのタイプとペイロード

を使ってディスパッチを呼び出す必要があります
番目のコールバックでは、応答がCB ( callback )関数で折り返されるたびに、ネットワークリクエストを作成する必要があります.最初のコールバック関数パラメータから応答を受け取ることができます.p >
< tt > fetchdataコンポーネント< br/>
<> P >
クラスをハイライト表示する

import React from "react";
import { getState } from "./store";
import { users } from "./thunks";

function Loading() {
  return <h1 style={{ color: "red" }}>Loading</h1>;
}

class FetchData extends React.Component {
  componentDidMount() {
    users();
  }
  Users = () => {
    if (getState().users) {
      return getState().users.map(user => (
        <ul key={user.id}>
          <li>{user.name}</li>
          <li>{user.email}</li>
        </ul>
      ));
    } else {
      return <h1 style={{color:'red'}}>Delaying request for 5seconds</h1>;
    }
  };

  render() {
    return (
      <div>
        <ul>
          <li>{getState().data ? getState().data : <Loading />}</li>
        </ul>

        <hr />
        <h1>Users</h1>
        <hr />

        {this.Users()}
      </div>
    );
  }
}

export default FetchData;

< div >
これがすべてのコンポーネントを作成していることです.p >
現在、我々はこれらのコンポーネントをアプリケーションにインポートする必要があります.我々のアプリがこれらの構成要素を知らないので、JSファイル.p >
< P >アプリ.JSファイル< br/>
<> P >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/saigowthamr/55a8097cffca4b1ff872df6282dbe4d9.js//>
< div >
< p > Hooは< p/p >を完成させた
<出力>最終出力
<堀田>
あなたが楽しんだ希望.👍🏻