Redux Toolkit は、Redux ロジックを作成するための公式の推奨方法です。すぐに使えるストア設定の適切なデフォルトが提供され、最も一般的に使用される Redux アドオンが組み込まれています。このブログでは、Redux Toolkit と React アプリケーションの統合の基本について説明します。
Redux Toolkit は、Redux ロジックの作成プロセスを簡素化するのに役立つツールのセットです。これには、ストアのセットアップ、リデューサーの作成、不変の更新ロジックの作成などの一般的なユースケースを簡素化するユーティリティが含まれています。
React アプリケーションで Redux Toolkit をセットアップする手順を見てみましょう。
まず、必要なパッケージをインストールする必要があります。これは、npm または Yarn を使用して実行できます。
npm install @reduxjs/toolkit react-redux
ストアは、Redux に命を吹き込むオブジェクトです。 Redux Toolkit では、configureStore 関数を使用してストアを作成できます。
// src/store.js import { configureStore } from '@reduxjs/toolkit'; import counterReducer from './features/counter/counterSlice'; const store = configureStore({ reducer: { counter: counterReducer, }, }); export default store;
スライスは、アプリの 1 つの機能に対する Redux リデューサー ロジックとアクションのコレクションです。 Redux Toolkit の createSlice 関数は、アクション クリエーターとアクション タイプを自動的に生成します。
// src/features/counter/counterSlice.js import { createSlice } from '@reduxjs/toolkit'; const counterSlice = createSlice({ name: 'counter', initialState: { value: 0, }, reducers: { increment: (state) => { state.value += 1; }, decrement: (state) => { state.value -= 1; }, }, }); export const { increment, decrement } = counterSlice.actions; export default counterSlice.reducer;
React コンポーネントで Redux ストアを利用できるようにするには、react-redux のプロバイダー コンポーネントを使用する必要があります。
// src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import App from './App'; import store from './store'; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );
React コンポーネントを Redux ストアに接続するには、react-redux の useSelector フックと useDispatch フックを使用できます。
// src/components/Counter.jsx import { useSelector, useDispatch } from 'react-redux'; import { increment, decrement } from '../features/counter/counterSlice'; function Counter() { const count = useSelector((state) => state.counter.value); const dispatch = useDispatch(); return ( <div> <h1>{count}</h1> <button onClick={() => dispatch(increment())}>Increment</button> <button onClick={() => dispatch(decrement())}>Decrement</button> </div> ); } export default Counter;
最後に、アプリケーションで接続コンポーネントを使用できるようになります。
// src/App.js import Counter from './components/Counter'; function App() { return ( <div> <Counter /> </div> ); } export default App;
これらの手順に従うことで、React アプリケーションに Redux Toolkit を設定して、予測可能かつ保守可能な方法で状態を管理できます。 Redux Toolkit は、Redux を使用する際の一般的なタスクの多くを簡素化し、Redux ロジックの作成と保守を容易にします。
Redux Toolkit と React についてさらに詳しく知りたい方のために、貴重なリソースをいくつか紹介します。
読んでいただきありがとうございます!
ぽ。
以上がReact で Redux Toolkit を使用する: 簡単なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。