REACT Redux ①Reduxの基本紹介

react-redux は、React と Redux を統合するための公式ライブラリです。これにより、React コンポーネントは Redux ストアにアクセスし、Redux ストアの状態変更に対応することができます。

#### 1. react-redux と redux のインストール
まず、react-redux と redux をインストールします：
```
npm install react-redux redux

```

#### 2. Redux ストアの作成
Redux では、ストアはアプリケーションの状態を保持するオブジェクトです。Redux ストアを作成するためには、リデューサーと初期状態を定義し、createStore 関数を使用してストアを作成します。

###### リデューサーの定義
リデューサーは純粋関数であり、現在の状態とアクションを受け取り、新しい状態を返します。以下は、簡単なカウンターリデューサーの例です：

```
// reducers/counter.js

const initialState = {
  count: 0
};

const counterReducer = (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;
  }
};

export default counterReducer;

```
###### ストアの作成
createStore 関数を使用して Redux ストアを作成します：
```
// store.js

import { createStore } from 'redux';
import counterReducer from './reducers/counter';

const store = createStore(counterReducer);

export default store;

```
#### 3. React アプリにストアを提供
Provider コンポーネントを使用して、Redux ストアを React アプリケーション全体に提供します：
```
// index.js または App.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')
);

```

#### 4. コンポーネントで Redux を使用する
関数コンポーネント内で useSelector と useDispatch フックを使用して、Redux ストアの状態にアクセスし、アクションをディスパッチします。

状態の読み取り
useSelector フックを使用して、Redux ストアの状態を読み取ります：
```
import React from 'react';
import { useSelector } from 'react-redux';

const CounterDisplay = () => {
  const count = useSelector((state) => state.count);

  return (
    <div>
      <h1>Count: {count}</h1>
    </div>
  );
};

export default CounterDisplay;

```
アクションのディスパッチ
useDispatch フックを使用して、アクションをディスパッチします：
```
import React from 'react';
import { useDispatch } from 'react-redux';

const CounterButtons = () => {
  const dispatch = useDispatch();

  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const decrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default CounterButtons;


```


#### 5. React Redux の動作原理
1.Redux ストア: Redux ストアは JavaScript オブジェクトで、アプリケーションの全ての状態ツリーを保持します。createStore メソッドで作成します。

2.アクション (Actions): アクションは、何が起こったかを説明するための普通の JavaScript オブジェクトです。各アクションには type プロパティが必要で、その他のプロパティには関連するデータを含めることができます。

3.リデューサ (Reducers): リデューサは純関数であり、現在の状態とアクションを受け取り、新しい状態を返します。リデューサ関数の形式は (state, action) => newState です。

4.アクションのディスパッチ (Dispatching Actions): 状態を更新するには、アクションをディスパッチ (dispatch) する必要があります。store.dispatch(action) によってアクションをリデューサに送り、リデューサはアクションのタイプに応じて状態を更新します。

5.React と Redux の接続: React Redux は Provider コンポーネントと connect 関数（または useSelector と useDispatch フック）を提供し、React コンポーネントを Redux ストアに接続します。


#### 6. 総合的な例
以下は、状態の読み取りとアクションのディスパッチを含む完全な例です：
```: app.js
import React from 'react';
import CounterDisplay from './CounterDisplay';
import CounterButtons from './CounterButtons';

const App = () => {
  return (
    <div>
      <h1>My Redux App</h1>
      <CounterDisplay />
      <CounterButtons />
    </div>
  );
};

export default App;

```
```:CounterDisplay
import React from 'react';
import { useSelector } from 'react-redux';

const CounterDisplay = () => {
  const count = useSelector((state) => state.count);

  return (
    <div>
      <h1>Count: {count}</h1>
    </div>
  );
};

export default CounterDisplay;

```
```:CounterButtons
import React from 'react';
import { useDispatch } from 'react-redux';

const CounterButtons = () => {
  const dispatch = useDispatch();

  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const decrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default CounterButtons;

```
参考リンク：
https://react-redux.js.org/