Redux: React 컴포넌트 파일에서 store.dispatch () 호출?

디스패치를 ​​구성 요소에 바인딩하는 도우미 메서드는 https://github.com/rackt/react-redux 를 확인하십시오.

특히 https://redux.js.org/docs/basics/UsageWithReact.html에서

connect () 호출로 래핑 된 모든 구성 요소는 디스패치 함수를 prop으로 수신하고 전역 상태에서 필요한 모든 상태를받습니다.

• 콘텐츠가 더 이상 존재하지 않는 관련 페이지에 대한 새 링크로 업데이트 된 댓글

이와 같은 상점을 수출 / 수입하는데 문제가 있습니까?

서버에서 요청마다 다른 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 실제로 사용 this.props.dispatch undefined 를 받고 있습니다.

내 코드의 관련 부분 :

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
  }
...

실제로 시도한 후 this.props.dispatch에 대해 정의되지 않았습니다.

내가 게시 한 코드를 실행하고 있지 않기 때문입니다. 내가 게시 한 코드에서 connect 는 두 번째 매개 변수를받지 못했습니다. vizActions 통과합니다. 그렇기 때문에 dispatch 받지 못합니다. connect 통화에서 vizActions 를 제거하면받을 수 있습니다.

두 가지 방법 모두 동일하므로 가장 잘 읽는 방법을 사용하십시오.

: +1 : 이제 말이 되네요. 도와 주셔서 감사합니다!

파티에 늦었지만 나중에 누군가 (나를 포함하여) 도움이 될 경우를 대비하여 답장합니다.
사용자 정의 mapDispatchToProps 이 필요한 경우 (연결을 위해 전달 된 두 번째 매개 변수) dispatch 를 키 중 하나로 명시 적으로 추가합니다.

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

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

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

안녕하세요. 나는 또한이 문제가 있습니다.
@gaearon , 귀하의 안내에 감사드립니다. 귀하의 솔루션을 사용했지만 이해하고 사용할 수 없습니다.
this.handlers 사용 방법을 모르겠습니다. 사용자가 카드를 클릭하면 해당 카드 ID를 부모의 구성 요소로 보내고 작업을 실행합니다.

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) 에서 무엇을 의미하며 어떤 역할을합니까?

@EhsanFahami :

이것은 지원 시스템이 아니라 버그 추적기입니다. 사용법에 대한 질문은 더 많은 사람들이 도움을 줄 준비가되어있는 Stack Overflow 또는 Reactiflux를 사용하십시오. 아마도 더 나은 답변을 더 빨리 얻을 수있을 것입니다. 감사!