reduxとreduxツールキット-簡単に説明した.
9730 ワード
導入
この記事はreduxについてですので、私はreactjsについて知っていると思います.あなたがReactJsについて知らないならば、最初にReactJsを学んでください.
ReduxはJavaScriptの状態管理ライブラリです.これは主に反応アプリケーションの状態を管理するために作成されました.しかし、あなたは他のJavaScriptライブラリやANGULARやVUEなどのフレームワークとReduxを使用することができます.私は個人的に大きな反応アプリケーションの状態を管理するReduxを使用します.私はreduxを使用することをお勧めしない単純なアプリケーションのための反応フックは完全にその仕事を行う.
アプリケーションが大きくなるとき、私のために、反応フックを使用している状態を管理することは、かなり乱雑なようです.それは私がreduxを使用することを検討するときです.あなたがスケールに行くプロジェクトを作成しているならば、あなたはReduxを使用しなければなりません.Reduxツールキットを使用することで、それは非常にredux開発を行うのは簡単です.Reduxツールキットは、公式、独創的な、バッテリーは、効率的なRedux開発のためのツールセット含まれています.それはバックグラウンドで多くの仕事をします.Reduxツールキットを使用して状態を管理する方が簡単です.
カウントアプリを作成することにより、私はどのようにReduxとReduxツールキットを使用する方法を示します.あなたが以前(反応と還元)フックで働いたならば、これらの学習ステップはコーヒーを飲むのと同じくらい簡単です.なぜなら、それらの基本的な用語を説明するつもりはないからです.
Redux :
新しい反応アプリを作成します
npx create-react-app counting-app
cd my-app
Reduxをインストールします
Reduxだけであなたの反応アプリを気にしない.そういうわけで、我々は反応Reduxをインストールしなければなりません.また、非同期動作で動作するREDUX thunkミドルウェア.
npm install redux react-redux redux-thunk
すべてのこれらのセットアップを完了した後に、我々がしようとしている最初のものはReduxの縮小を作成することです.今、我々はすべての還元器を保存する状態フォルダ内の還元器と呼ばれる別のフォルダを作成します.
ここで、CounteringReduceというJavaScriptファイルを作成します.還元フォルダ内のJS.あなたのアプリケーションのための複数の還元ファイルを持つことができます.しかし、このプロジェクトでは、1つのリダラーファイルのみを使用します.
還元剤
還元器は、還元器に渡される動作に基づいて状態を返す単純なJavaScript関数です.RedUxの縮小は2つのパラメータをとり、最初のものは初期状態であり、2番目のものは動作です.アクションに基づいて状態を返すには、switch文を使います.他ならば使用することもできますが、推奨しません.
//created the function with parameters.
const reducer = (state = 0, action) => {
// reads the action and returns a state.
switch (action.type) {
case "INCREMENT":
return state + action.payload;
case "DECREMENT":
return state - action.payload;
default:
return state;
}
};
//exporting the function.
export default reducer;
結合減速機:
還元器を結合するために、還元器フォルダの中に別のファイルを作成する必要があります.私はcombreducersという名前を付けます.js
まず、ReduxからCombinerComducerをインポートします.その後、還元ファイルからの縮小をインポートします.次に、各還元器に対するCombinereducers関数にキー値ペアを渡します.
例えば、カウントダウンの「count」を呼び出します.そして、countの値は、CounteringReducerによって返される値になります.
// import combineReducers
import { combineReducers } from "redux";
// import countingReducer for countingReducer.js
import countingReducer from "./countingReducer";
const reducers = combineReducers({
// key: value
count: countingReducer,
});
// exportin reducers
export default reducers;
ストア
還元剤を組み合わせた後.ストアというJSファイルを作成します.状態フォルダのjs.インストア.我々はcomduducersからreduxと減速機からcreatestoreをインポートする必要があります.js
CreateStoreは通常2つのパラメータを取ります、最初のものは減速器です、そして、2番目は1がデフォルト状態です.最後に、asyncアクションで動作するには、Thunkミドルウェアを3番目のパラメータとして渡す必要があります.そのためには、redux thunkからreduxとthunkミドルウェアからApplyMiddlewareをインポートする必要があります.次に、ApplymIdleWare(Thunk)を3番目のパラメータとして渡します.
// import createStore and applyMiddleware
import { createStore, applyMiddleware } from "redux";
// import reducers
import reducers from "./reducers/combReducers";
// import thunk middleware
import thunk from "redux-thunk";
// export the store.
export const store = createStore(reducers, {}, applyMiddleware(thunk));
プロバイダ
我々の反応アプリケーションから私たちの店にアクセスするには、我々は反応Reduxからプロバイダを使用してアプリケーション全体をラップする必要があります.これを行うには、インデックスを使用します.SrcフォルダのJSファイルは、Restore Reduxとストアからのストアからプロバイダーをインポートする必要があります.jsファイル.次に、アプリケーションコンポーネントをプロバイダーとラップします.次に、ストアをプロバイダーに指定します.
// import provider and store.
import { Provider } from "react-redux";
import { store } from "./state/store";
ReactDOM.render(
<React.StrictMode>
{
// wrap the app with the provider.
}
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById("root")
);
// import useSelector.
import { useSelector } from "react-redux";
// getting the state.
const count = useSelector((state) => state.count);
アクションクリエイター
今、インクリメントまたはデクリメントのために、我々は行動を起こさなければなりません.そして、我々は行動作者とそれをするつもりです.そのためには、状態フォルダの中でアクションクリエイターと呼ばれる別のフォルダを作成します.これは、すべてのアクションの作成者のファイルが格納されるフォルダです.このフォルダの中で、インデックスというJSファイルを作成します.jsアクションクリエイターはアクションを出す機能です.今、我々はインデックスの中に2つのアクションクリエイターを作成するつもりです.JSファイル、インクリメントのための1つと減少のためのもう一つ.
export const increment = (ammount) => {
return (dispatch) => {
dispatch({
type: "INCREMENT",
payload: ammount,
});
};
};
export const decrement = (ammount) => {
return (dispatch) => {
dispatch({
type: "DECREMENT",
payload: ammount,
});
};
};
export * as actionCreators from "./action-creators/index";
ActionCreatorを使用するには、ActionCreatorを使用して、RereRexからReadRemox、およびReduxからBindActionCreatorをインポートします.まず、usedispatchを変数に代入します.次に、bindActionCreatorを使用してActionCreatrosをバインドし、ディスパッチを渡します.その後、BindActionCreatorからインクリメントとデクリメントを変更します.最後に、カウントを表示します.そして、2つのボタンで破壊された行動を使用することによって、我々は増分と減少をすることができます.
import "./App.css";
// import useSelector & useDispatch from react-redux
import { useSelector, useDispatch } from "react-redux";
// import bindActionCreators from redux
import { bindActionCreators } from "redux";
// import actionCreators
import { actionCreators } from "./state/index";
function App() {
const count = useSelector((state) => state.count);
// assigned useDispatch to dispatch variable.
const dispatch = useDispatch();
// destructuring increment and decrement actions
const { increment, decrement } = bindActionCreators(actionCreators, dispatch);
return (
<div className="App">
<h2>{count}</h2>
<button onClick={() => increment(100)}>increment</button>
<button onClick={() => decrement(100)}>decrement</button>
</div>
);
}
export default App;
最終製品:
あなたは私と一緒に従った場合は、このようなカウントアプリを持っている必要があります.
動作方法
UIからインクリメントまたはデクリメントボタンをクリックすると、アクションを作成してアクションを作成します.その後、そのアクションは減速機に渡された.還元は動作をディスパッチし、状態を返す.それから、その状態は、ストアに格納される.そして、我々のアプリケーションストアから更新されたUIの新しい状態を読み取ります.
You will find this project in my GitHub repository.
Reduxツールキット:
アプリケーションでReduxを使用する場合は、Reduxツールキットを使用する必要があります.これにより、上記の全てのプロセスが簡素化される.
私はまた、どのようにこのカウントアプリケーションをReduxツールキットを使用して作成することができますを表示したい.しかし、それはofficial documentationでよく示されます.それで、私は繰り返さないつもりです.興味があるならば、official documentationを訪問してください.
参考文献
Official Redux documentation.
まとめ
私は、このブログはあなたのために有用だった願っています.あなたがこのブログについてのどんな推薦、質問または提案もするならば、私に、または、このブログについてコメントしてください.
このブログはもともとDevMdMamun's blogに掲載されています
Reference
この問題について(reduxとreduxツールキット-簡単に説明した.), 我々は、より多くの情報をここで見つけました https://dev.to/devmdmamun/redux-and-redux-toolkit-simply-explained-1b1bテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol