Redux: React घटक फ़ाइल से store.dispatch () कॉलिंग?

अपने घटकों को प्रेषण के लिए सहायक विधि के लिए https://github.com/rackt/react-redux देखें

विशेष रूप से, https://redux.js.org/docs/basics/UsageWithReact.html से

कनेक्ट () कॉल के साथ लिपटे किसी भी घटक को प्रॉप के रूप में एक प्रेषण समारोह प्राप्त होगा, और किसी भी राज्य को वैश्विक राज्य से इसकी आवश्यकता होगी।

• संबंधित पृष्ठ के नए लिंक के साथ अपडेट की गई टिप्पणी, जहां सामग्री अब मौजूद नहीं है

क्या स्टोर को इस तरह से निर्यात / आयात करने में कुछ गलत है?

यदि आप सर्वर पर अपने एप्लिकेशन को प्रस्तुत करना चाहते हैं तो यह काम नहीं करेगा क्योंकि आप सर्वर पर अनुरोध के अनुसार store । इसलिए हम डॉक्स में इस दृष्टिकोण की अनुशंसा कभी नहीं करते हैं।

इसके बजाय ऐसा क्यों नहीं करते?

import { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from './actions';

let createHandlers = function(dispatch) {
  let onClick = function(node, data) {
    dispatch(actions.nodeClicked(data))
  };

  return {
    onClick,
    // other handlers
  };
}

class Controls extends Component {
  constructor(props) {
    super(props);
    this.handlers = createHandlers(this.props.dispatch);
  }

  render() {
    // pass this.handlers anywhere you'd like
  }
}

export default connect()(Controls);

@gaearon बहुत अच्छा लग रहा है, धन्यवाद!

@gaearon वास्तव में, इसे आज़माने के बाद, मुझे undefined this.props.dispatch ।

मेरे कोड के प्रासंगिक भाग:

import React from 'react';
import {Component} from 'react';
import {connect} from 'react-redux';
import * as vizActions from './vizActions';
import viz from './lib/viz';

let createHandlers = function(dispatch) {
  return {
    click: function(DOMNode, data) {
        // Getting undefined here
        dispatch(vizActions.setSelectedNode(data));
    }
  };
}

class Viz extends Component {
  constructor(props) {
    super(props);
    console.log(this.props.dispatch); // <- Getting undefined here
    // Passing the redux dispatch to be used in handlers function
    this.handlers = createHandlers(this.props.dispatch);
  }

  componentDidMount() {
    // Create Viz
  }

  componentDidUpdate() {
    // Update Viz Data, passing in this.handlers
  }

  render() {
    return <div id="viz"></div>;
  }
};


function mapStateToProps(state) {
  return {
    // Pass the network used for the viz as a prop
    network: state.get('visualization').get('network')
  };
}

export const VizContainer = connect(mapStateToProps, vizActions)(Viz);

हालाँकि, एक और मुद्दा (https://github.com/rackt/redux/issues/239) पढ़ने के बाद मुझे महसूस हुआ कि मैं वास्तव में this.props connect() माध्यम से अपने कार्यों को बांध रहा हूं, इसलिए मैं कर सकता हूं जब मैं createHandlers() कॉल करूं, तब ही आवश्यक कार्यवाही करें। शायद यह सबसे अच्छा तरीका नहीं है, लेकिन यह अब काम करता है:

...
let createHandlers = function(action) {
  return {
    click: function(DOMNode, data) {
                // This works now
        action(data);
    }
  };
}

class Viz extends Component {
  constructor(props) {
    super(props);
    // Passing the redux dispatch to be used in handlers function
    this.handlers = createHandlers(this.props.setSelectedNode); // passing action creator function
  }
...

दरअसल, इसे आजमाने के बाद, मैं इसके लिए अपरिभाषित हो रहा हूं।

क्योंकि आप मेरे द्वारा पोस्ट किए गए कोड को नहीं चला रहे हैं। कोड में मैंने connect पोस्ट किया vizActions हैं। यही कारण है कि आपको dispatch नहीं मिलते हैं। यदि आप vizActions को connect कॉल से निकालते हैं, तो आपको यह मिल जाएगा।

हालांकि दोनों दृष्टिकोण समान हैं, इसलिए आपके साथ जो सबसे अच्छा है उसे पढ़ें।

: +1: ठीक है, अब समझ में आता है। सहायता के लिए धन्यवाद!

किन्दा को पार्टी के लिए देर हो गई, लेकिन सिर्फ मामले में जवाब देने से उसे बाद में (खुद सहित) किसी की मदद मिलती है।
यदि एक कस्टम mapDispatchToProps की जरूरत है (कनेक्ट होने के लिए दूसरा पैराम), तो स्पष्ट रूप से कुंजी में से एक के रूप में dispatch जोड़ें।

const mapDispatchToProps = (dispatch) => {
  return {
    dispatch,

    // ... other custom mapped dispatch functions ...
    myFunction: (myParam) => {
      dispatch(State.Actions...)
    },
  }
}

export default connect( mapStateToProps, mapDispatchToProps )(Viz);

नमस्ते। मुझे भी यह समस्या है।
@ गेयेरॉन , मैं आपके मार्गदर्शन के लिए आभारी हूं। मैंने आपके समाधानों का उपयोग किया है, लेकिन मैं उन्हें समझ नहीं सकता और उनका उपयोग नहीं कर सकता।
मुझे नहीं पता कि this.handlers का उपयोग कैसे करें जब उपयोगकर्ता किसी कार्ड पर क्लिक करता है, तो मैं उस कार्ड आईडी को माता-पिता के घटकों को भेजता हूं और कार्रवाई चलाता हूं।

import React , { Component } from 'react';
import { Col } from "react-bootstrap";
import { connect } from 'react-redux';
import Home from "../components/Home";
import { fetchHome, asideArticle } from "../actions/index";

let createHandlers = function(dispatch) {
    let onClick = function(node, articleId) {
        dispatch(asideArticle(articleId))
    };
    return {
        onClick
    };
}

class HomeContainer extends Component {
    constructor(props) {
        super(props);
        this.handlers = createHandlers(this.props.dispatch); 
        console.log('constructor => this.props.dispatch => Result => dispatch is undefined);
    }
    componentDidMount() {
        this.props.fetchHome();
    }

    render() {
        const { homeData, article } = this.props;


       // 
        return (
            <Col>
                <Home homeData={homeData} asideArticle={(articleId) => asideArticle(articleId) } />
            </Col>
        );
    }
}

const mapStateToProps = state => ({
    homeData : state.home,
    article: state
});

function loadData(store){
    return store.dispatch(fetchHome());
}

export default {
    loadData,
    component: connect(mapStateToProps, { fetchHome, asideArticle })(HomeContainer)
}

मैं इसे पास करने के लिए क्लिक इवेंट को पास करने के बाद this.handlers और articleId उपयोग कैसे कर सकता हूं?
और क्या करता है node में मतलब पैरामीटर function(node, articleId) और क्या करता है यह करते हैं?

@ एहसानफामी :

यह एक बग ट्रैकर है, समर्थन प्रणाली नहीं है। उपयोग के प्रश्नों के लिए, कृपया स्टैक ओवरफ्लो या रिएक्टिफ्लक्स का उपयोग करें जहां आपकी सहायता करने के लिए बहुत अधिक लोग तैयार हैं - आपको शायद बेहतर उत्तर मिलेगा। धन्यवाद!