新しい魔法のreduxランド.

このポストは、あなたが少し前にreduxで働いたと仮定します、それで、構文/説明があなたにほとんど意味をなさないならば、事前に謝罪してください.🖖

初めに.

...クラスの構成要素の時代に戻って、彼らが必ずしも互いの一部であったように、そこの向こうで、かなりの量のチュートリアルは常に反応+ Reduxを教えます.
頻繁に起こったことは、これらの2つの一緒に置かれた急な学習曲線は、人々が1つまたは他の方に肯定的な感情を持っていないようになります(しかし、非常に可能性のあるreduxは、少なくとも好きだった).

ディスパッチ、還元剤、アクションクリエーター、容器...
振り返ってみると、気持ちがよくわかる.
私の経験

// Having your container components (the ones that do the Redux magic)  

function mapStateToProps(state) {
  // Pass the global state down as you want it
}

function mapDispatchToProps(dispatch) {
  // Bind your action creators and have your components accessing them
}

export default connect(mapStateToProps, mapDispatchToProps)(MyContainerComponent);

その後、コンテナーコンポーネントの下にあるすべてのコンポーネントをラップし、Redux Townに移動します.今、あなたは更新し、アプリケーションのグローバル状態を読むことができます.
ああ、あなたの減速を忘れないでください!
私は、私たちのチームがそれからすべてのものを経験していて、しばしば圧倒されていると感じます.私は、将来がどうなるかをほとんど知りませんでした.
しかし、私は新しい仕事のため、ほぼ2年間RedUxを使わないことになりました.私たちはそれを必要としなかったので、私は再びそれを聞いたことがない.

早送り2年.

アナザー・デイ

最近、私の良い同僚とのランダムな話の間、彼はReduxについて熱心であると言いました、そして、それは私の好奇心を引き起こしました.

我々は何かクールでそれを構築することができます.

マジックをとりましょう。

始めるには、店が必要だ.

// src/store/index.js

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({ reducer: {} });

export default store;

それです.In their docs あなたはそれが前にあった方法をチェックすることができます、そして、楽しい驚きはそこで止まりませんでした.
今では減速機が必要です.
Reduxツールキットはreducer slices , and what are those ?

slice reducer: a reducer that is being used to handle updates to one specific slice of the state tree, usually done by passing it to combineReducers

( from their docs )
基本的に、それはより焦点を絞った還元器です、それは多くをする1つの巨大な還元器を持つ代わりに状態変更論理を分割するのがより簡単です.
スライスを作成する方法です.

// src/features/search/searchSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  searchString: ""
};

export const searchSlice = createSlice({
  name: "search",
  initialState,
  reducers: {
    searchCard: (state, action) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.searchString = action.payload;
    }
  }
});

// Action creators are generated for each case reducer function
export const { searchCard } = searchSlice.actions;

export default searchSlice.reducer;

コードとそのドキュメントに記載されているように、何度も何度もオブジェクトを広げる必要はありません.Reduxツールキットはすでにあなたのための不変性の世話をするので、直接状態に値を割り当てること自由に感じなさい.二度と事故で国家を上書き!
どのように我々はアクションを作成する必要はありません注意してください?createSlice すでに、あなたのために、還元剤と結合します.しかし、あなたが手でそれらを作成したい場合は、チェックしてくださいcreateReducer APIについて
クール、我々のスライス準備が整いました.最後にストアに接続できます.

// src/store/index.js

import { configureStore } from "@reduxjs/toolkit";
import searchReducer from "../features/search/searchSlice";

export const store = configureStore({
  reducer: {
    search: searchReducer
  }
});

今、我々はコンポーネントでそれを使用する準備が整いました.

コンポーネントとの相互作用

記憶するconnect , mapStateToProps and mapDispatchToProps ?
これは今、古い感じですか?

const search = useSelector((state) => state.search);
const dispatch = useDispatch();

useSelector どのように我々はあなたのストアによって共有されるグローバルな状態にタップします.
And useDispatch 我々は我々の行動を派遣することができます.しかし、我々はどこから我々の行動を得ますか?
スライスから!🤩

import { search } from "./features/search/searchSlice";

すべてをまとめる

// src/App.js
import { useDispatch, useSelector } from "react-redux";

import { searchCard } from "./features/search/searchSlice";
import "./styles.css";
import { useCallback, useEffect, useState } from "react";
import { useUpdateEffect } from "react-use";

export default function App() {
  const searchState = useSelector((state) => state.search);
  const [card, setCard] = useState(null);

  const dispatch = useDispatch();

  const handleChange = useCallback(
    (searchString) => {
      if (!searchString) return;

      fetch(
        `https://api.scryfall.com/cards/named?fuzzy=${encodeURI(searchString)}`
      )
        .then((response) => response.json())
        .then((jsonResponse) => setCard(jsonResponse));
    },
    [setCard]
  );

  useUpdateEffect(() => {
    handleChange(searchState.searchString);
  }, [searchState]);

  return (
    <div className="App">
      <h1>
        Would you like a magic card?{" "}
        <span role="img" aria-label="card">
          🃏
        </span>
      </h1>
      <div style={{ marginBottom: "2rem" }}>
        <label htmlFor="card-search">Card select: </label>
        <select
          id="card-seard"
          onChange={(event) => dispatch(searchCard(event.target.value))}
        >
          <option value="">Choose one</option>
          <option value="lightning bolt">Lightning bolt</option>
          <option value="ancestral recall">Ancestral Recall</option>
        </select>
      </div>
      <div>
        {card?.image_uris && (
          <img
            src={card.image_uris.normal}
            alt={card.name}
            style={{ height: "300px" }}
          />
        )}
      </div>
    </div>
  );
}

ランニングサンドボックスをここに置きます.

結論

これはreduxを追加する簡単な例であるにもかかわらず、私はそれを始めるためにどれだけ簡単に共有したい.あとで書く予定は何かRTK (Redux Toolkit) Query . このポストに加えることは、それをあまりに込み上げるようにします.
私はそれができることから完全に吹き飛ばされました、そして、私は確かにそれをチェックすることを勧めます.
少しの間一緒に遊んで、私はこの楽しい側プロジェクトを作成して、Tabletop RPGにいるならば、見てみます:www.yougotaquest.com