web-dev-qa-db-ja.com

React-Reduxのディスパッチ機能

私は反応を勉強していて、このような例があります

//index.js
const store = createStore(reducer)
render(
  <Provider store={store}>
    <AddTodo />
  </Provider>,
  document.getElementById('root')
)

//Apptodo.js
import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
    .......

this.pros.storeを取得せず、単純にdispatch（）関数を呼び出したのはなぜですか？

編集：this.prosからdispatchを抽出する方法。オブジェクトはthis.pros.storeではありませんか？この場合、なぜstoreを抽出しないのですか？

ありがとうございました。

javascriptreactjsecmascript-6react-redux
22
Quoc-Hao Tran

addTodoコンポーネントは、ストアの状態とメソッド（例：dispatch、getStateなど）にアクセスできます。そのため、connectメソッドを介してReduxストアにReactビューを接続すると、ストアの状態とメソッドにアクセスできました。

({ dispatch })は、JS destructuring assignment を使用してthis.propsオブジェクトからdispatchを抽出するだけです。

17
Rowland

react-reduxはライブラリです これは、これらのメソッドを小道具としてコンポーネントに渡します。

dispatch（）はアクションをディスパッチするために使用されるメソッド であり、ストアへの状態変更をトリガーします。 react-reduxは単にあなたに便利なアクセスを提供しようとしています。

ただし、接続関数にアクションを渡した場合、小道具ではディスパッチを使用できないことに注意してください。つまり、以下のコードでは、someActionを渡して接続しているため、dispatch()はプロップで使用できなくなりました。

ただし、このアプローチの利点は、起動時に自動的にディスパッチされるプロップで使用可能な「接続」アクションがあることです。それ。

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { someAction } from '../myActions';

const MyComponent = (props) => {
  // someAction is automatically dispatched for you
  // there is no need to call dispatch(props.someAction());
  props.someAction();
};

export default connect(null, { someAction })(MyComponent);

または、指定した例に示すように object destructuring を使用する場合...

const MyComponent = ({ someAction }) => {
  someAction();
};

ただし、小道具で利用可能な接続されたアクションを呼び出す必要があることに注意することが重要です。 someAction（）を呼び出そうとした場合、propsで利用可能な接続されたアクションではなく、生のインポートされたアクションを呼び出すことになります。以下の例では、storeを更新しません。

const MyComponent = (props) => {
  // we never destructured someAction off of props
  // and we're not invoking props.someAction
  // that means we're invoking the raw action that was originally imported
  // this raw action is not connected, and won't be automatically dispatched
  someAction();
};

これは、react-reduxを使用しているときに常に遭遇する一般的なバグです。 eslintの影のないルールに従う は、この落とし穴を避けるのに役立ちます。

18
jabacchetta