13

私は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デコレーターの実装はどうですか? トランスパイル後のコードはどのようになりますか?

前もって感謝します ：）

4

1 に答える 1

32

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

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

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

これが行うことは、コンポーネント (ここではHome) を受け取り、ストアに適切に接続された新しいコンポーネントを返すことです。

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

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

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

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

  • mergePropsを使用すると、カスタム関数を定義して、コンポーネントが受け取る props、そこからのもの、mapStateToPropsおよびからのものをマージできますmapDispatchToProps

  • オプション、いくつかのオプション…</p>

于 2016-04-11T16:35:37.140 に答える