JavaScriptとReactJS：@記号の秘密：デコレータ構文と@connectデコレータ

2024-04-02

JavaScript、ReactJS、デコレータにおける「@」記号（アットマーク）

デコレータは、関数に新しい機能を追加したり、関数の動作を変更するために使用できる関数です。デコレータは、関数の前に @ 記号を付けて記述します。

@connect デコレータは、ReactコンポーネントをReduxストアと接続するために使用されます。このデコレータは、コンポーネントに以下の機能を追加します。

ストアからの状態の取得
ストアへのアクションのディスパッチ

@connect デコレータは以下の引数を受け取ります。

mapStateToProps: ストアの状態からコンポーネントのプロパティを生成する関数

@ 記号の役割

@connect デコレータにおける @ 記号は、デコレータ構文の一部です。この記号は、デコレータ関数を呼び出す前に、デコレータ関数を引数として渡すことを意味します。

例：

@connect(mapStateToProps, mapDispatchToProps)
class MyComponent extends React.Component {
  // ...
}

上記の例では、@connect デコレータは mapStateToProps と mapDispatchToProps 関数を引数として受け取り、MyComponent コンポーネントを拡張します。

@ 記号は、デコレータ構文の一部であり、デコレータ関数を呼び出す前に、デコレータ関数を引数として渡すことを意味します。@connect デコレータは、ReactコンポーネントをReduxストアと接続するために使用されます。

// ストアの状態
const initialState = {
  count: 0
};

// アクション
const incrementCount = () => ({
  type: 'INCREMENT_COUNT'
});

// ストア
const store = createStore(
  reducer,
  initialState
);

// コンポーネント
const MyComponent = ({ count, incrementCount }) => (
  <div>
    <h1>カウント: {count}</h1>
    <button onClick={incrementCount}>+</button>
  </div>
);

// `@connect` デコレータ
const ConnectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

// 状態からプロパティを生成
function mapStateToProps(state) {
  return {
    count: state.count
  };
}

// アクションクリエイターを生成
function mapDispatchToProps(dispatch) {
  return {
    incrementCount: () => dispatch(incrementCount())
  };
}

// ReactDOM.render(<ConnectedComponent />, document.getElementById('root'));

mapDispatchToProps 関数は、incrementCount アクションクリエイターを生成します。

ConnectedComponent コンポーネントは、count プロパティと incrementCount 関数を受け取ります。incrementCount 関数は、count を1増やすアクションをディスパッチします。

このコードを実行すると、ブラウザにカウンターが表示されます。ボタンをクリックすると、カウントが1ずつ増えていきます。

@connect デコレータを使用しない方法

connect 関数は、コンポーネントをストアと接続するために使用できます。connect 関数は、以下の引数を受け取ります。

const MyComponent = ({ count, incrementCount }) => (
  <div>
    <h1>カウント: {count}</h1>
    <button onClick={incrementCount}>+</button>
  </div>
);

const ConnectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

// 状態からプロパティを生成
function mapStateToProps(state) {
  return {
    count: state.count
  };
}

// アクションクリエイターを生成
function mapDispatchToProps(dispatch) {
  return {
    incrementCount: () => dispatch(incrementCount())
  };
}

// ReactDOM.render(<ConnectedComponent />, document.getElementById('root'));

上記の例は、@connect デコレータを使用せずに、connect 関数を使用してコンポーネントを接続する方法を示しています。

Provider コンポーネントは、コンポーネントツリー全体にストアを提供するために使用できます。

const MyComponent = ({ count, incrementCount }) => (
  <div>
    <h1>カウント: {count}</h1>
    <button onClick={incrementCount}>+</button>
  </div>
);

const App = () => (
  <Provider store={store}>
    <MyComponent />
  </Provider>
);

// ReactDOM.render(<App />, document.getElementById('root'));