React Redux チュートリアル: Redux を使用してフロントエンドの状態を管理する方法
React は、ユーザー インターフェイスを構築するための非常に人気のある JavaScript ライブラリです。 Redux はアプリケーションの状態を管理するための JavaScript ライブラリです。これらを組み合わせることで、フロントエンドの状態をより適切に管理できるようになります。この記事では、Redux を使用して React アプリケーションの状態を管理する方法を紹介し、具体的なコード例を示します。
1. Redux のインストールとセットアップ
まず、Redux と React Redux をインストールする必要があります。プロジェクト ディレクトリで次のコマンドを実行して、依存関係をインストールします。
npm install redux react-redux
インストールが完了したら、Redux ストアをセットアップする必要があります。プロジェクトのルート ディレクトリで、store.js
ファイルを作成し、次のコードを追加します。
import { createStore } from 'redux'; // 初始状态 const initialState = { count: 0 }; // Reducer函数 function reducer(state = initialState, action) { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; default: return state; } } // 创建store const store = createStore(reducer); export default store;
このコードは、{ count: 0 }# # の初期状態を作成します。 # のストアでは、状態の変更を処理するためのリデューサー関数も定義されています。アプリケーションがカウンターを増やす必要がある場合は、
{ type: 'INCREMENT' } のアクションを送信でき、カウンターを減らす必要がある場合は、
{ type: のアクションを送信できます。 'デクリメント' }。
index.js ファイルに追加します。
import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import store from './store'; import App from './App'; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );
Provider コンポーネントを使用して Redux ストアを渡します。アプリケーションのルート コンポーネント
App を使用すると、状態の読み取りまたは変更が必要なコンポーネントで Redux を使用できます。
Counter コンポーネントを作成します。プロジェクトのルート ディレクトリに
Counter.js ファイルを作成し、次のコードを追加します。
import React from 'react'; import { connect } from 'react-redux'; class Counter extends React.Component { increment = () => { this.props.dispatch({ type: 'INCREMENT' }); }; decrement = () => { this.props.dispatch({ type: 'DECREMENT' }); }; render() { return ( <div> <h1>计数器:{this.props.count}</h1> <button onClick={this.increment}>增加</button> <button onClick={this.decrement}>减少</button> </div> ); } } function mapStateToProps(state) { return { count: state.count }; } export default connect(mapStateToProps)(Counter);
connect 関数を呼び出して
mapStateToProps 関数を渡すことで、Redux ストアの
{ count: 0 } をコンポーネントの
this にマッピングできます。 props.count 属性。こうすることで、アプリケーションの状態が変化したときにコンポーネントが自動的に更新されます。
Counter コンポーネントをアプリケーション
App.js:
import React from 'react'; import Counter from './Counter'; class App extends React.Component { render() { return <Counter />; } } export default App;
以上がReact Redux チュートリアル: Redux を使用してフロントエンドの状態を管理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。