ReduxJSツールキットの設定と使用

これは、私たちはreduxjsツールキットライブラリ(RTK)を使用してカウントされた果実を追加するアプリケーションを構築するブログのシリーズの最初のブログです.

ゴール
アプリケーションのデザインは、我々は果物と果物のリストに追加される果物と果物を追加されます.我々はアプリケーションのワイド状態管理のためのreduxを使用する必要がありますので、果物の追加とフルーツリストを表示する2つの別々のコンポーネントになります.

最終的なアプリケーションはここにあります.
https://fruits-logger-redux-toolkit.netlify.app/

完全なコードはここにあります.
https://github.com/abhidatta0/fruits-logger-redux-toolkit

始めましょう
最初に、以下のコマンドを使用して、反応するボイラープレート(RTKなしで)を生成します

npx create-react-app fruitslogger

次に、RTKをインストールし、Reduxライブラリ

npm install @reduxjs/toolkit react-redux

ツールキット
コアredux機能を提供するためのものです
反応する
Reduxと我々の反応コードを統合するためです.
さあ、ファイルを作るstore.js 我々のプロジェクトのルートフォルダで、シンプルなストアのコードを追加し、我々のアプリにそれをフック.jsファイル.


我々ならばnpm start ブラウザで実行すると、コンソールエラーが発生しますStore does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers. .
それで、問題を修正しましょう、しかし、その前に、UIを構築しましょう.