Pertanyaan fungsi pengiriman di redux-react


Saya belajar bereaksi dan saya punya contoh seperti ini

//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 = ''
      }}>
    .......

Kenapa tidak bisa this.pros.store tetapi cukup panggil fungsi pengiriman ()?

EDIT: Bagaimana cara mengekstrak dispatch dari this.pros. Bukankah benda itu this.pros.store ? dan dalam hal ini kenapa tidak kita ekstrak saja store ?

Terima kasih.


6
2018-03-18 06:08


asal


Jawaban:


Anda addTodo komponen memiliki akses ke status dan metode toko (misalnya, pengiriman, getState, dll). Jadi, ketika Anda menghubungkan tampilan React Anda dengan toko Redux melalui connect metode, Anda memiliki akses ke negara bagian dan metode penyimpanan.

({ dispatch }) hanya menggunakan JS penugasan destrukturisasi untuk mengekstrak dispatch dari this.props obyek.


4
2018-03-18 06:17



react-redux adalah pustaka yang melewatkan metode ini ke komponen Anda sebagai alat peraga.

dispatch () adalah metode yang digunakan untuk mengirim tindakan dan memicu perubahan status ke toko. re-redux hanya mencoba memberi Anda akses yang mudah untuk itu.

Namun, perhatikan bahwa pengiriman tidak tersedia di properti jika Anda melakukan tindakan ke fungsi koneksi Anda. Dengan kata lain, dalam kode di bawah ini, karena saya sedang lewat someAction untuk menghubungkan, dispatch() tidak lagi tersedia di alat peraga.

Namun, manfaat untuk pendekatan ini adalah Anda sekarang memiliki tindakan "terhubung" yang tersedia di properti Anda secara otomatis dikirim untuk Anda ketika Anda memohonnya.

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);

Atau jika kita menggunakannya merusak objek seperti yang ditunjukkan pada contoh yang Anda berikan ...

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

Penting untuk dicatat, bagaimanapun, bahwa Anda harus meminta tindakan yang terhubung tersedia di alat peraga. Jika Anda mencoba mengaktifkan someAction (), Anda akan memohon tindakan baku, yang diimpor - bukan tindakan yang terhubung yang tersedia di alat peraga. Contoh yang diberikan di bawah ini BUKAN memperbarui toko.

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();
};

Ini adalah bug umum yang dijalankan orang sepanjang waktu saat menggunakan re-redux. Mengikuti aturan no-shadow eslint dapat membantu Anda menghindari jebakan ini.


10
2018-03-18 06:26