web-dev-qa-db-ja.com

react-reduxでの@connectデコレータの使用は何ですか

私はReactを学んでいて、いくつかのチュートリアルに従って、このコードに出くわしました：

import React                  from 'react';
import TodosView              from 'components/TodosView';
import TodosForm              from 'components/TodosForm';
import { bindActionCreators } from 'redux';
import * as TodoActions       from 'actions/TodoActions';
import { connect }            from 'react-redux';

@connect(state => ({ todos: state.todos }))

export default class Home extends React.Component {
  render() {
    const { todos, dispatch } = this.props;

    return (
      <div id="todo-list">
        <TodosView todos={todos} 
          {...bindActionCreators(TodoActions, dispatch)} />

        <TodosForm
          {...bindActionCreators(TodoActions, dispatch)} />
      </div>
    );
  }
}

これはtodoアプリケーションであり、これはメインページであり、さらに2つの小さなcomponentsをロードします。私はほとんどすべてを理解しましたが、いくつかのことを得ることができませんでした：

  • connectは何をしますか？私はあなたが4つのパラメータを渡さなければならないことを知っています（私はそれらの4つの変数が何であるかを正確に得ることができませんでしたが）。
  • @connectデコレータの実装はどうですか？トランスパイル後のコードはどのようになりますか？

前もって感謝します ：）

reactjsreduxreact-redux
13
Bharat Soni

Reduxは、アプリケーションの状態をストアと呼ばれる単一のオブジェクトに保持します。 connectを使用すると、Reactコンポーネントをストアの状態に接続できます。つまり、ストアの状態をpropsとしてそれらに渡すことができます。

デコレータ構文がないと、コンポーネントのエクスポートは次のようになります。

_export default connect(state => ({todos: state.todos}))(Home);
_

これは、コンポーネント（ここではHome）を受け取り、ストアに適切に接続されている新しいコンポーネントを返します。

ここで接続されているとは、ストアの状態をpropsとして受け取り、この状態が更新されると、この新しい接続されたコンポーネントが新しい小道具を受け取ることを意味します。接続されているということは、ストアのdispatch関数にアクセスできることも意味します。これにより、ストアの状態を変更できます。

4つの引数は次のとおりです。

  • mapStateToProps接続されているすべてのコンポーネントにストアのすべての状態を挿入したくない場合があります。この関数を使用すると、関心のある状態スライスを定義したり、ストアの状態から派生した新しいデータをpropsとして渡すことができます。 state => ({todosCount: state.todos.length})のようなことを行うと、HomeコンポーネントはtodosCountpropを受け取ります。

  • mapDispatchToPropsディスパッチ関数に対して同じことを行います。 dispatch => ({markTodoAsCompleted: todoId => dispatch(markTodoAsCompleted(todoId))})のようなことをすることができます

  • mergePropsコンポーネントが受け取る小道具、mapStateToPropsからの小道具とmapDispatchToPropsからの小道具をマージするカスタム関数を定義できます。

  • オプションまあ、いくつかのオプション…

31
VonD