Как я могу использовать Dispatch внутри компонента

Question

На самом деле, я все еще не понимаю, что такое Dispatch in nest component.Я знаю, что в Redux мы можем использовать диспетчеризацию на любом уровне.

Во-первых, у меня есть редуктор, как показано ниже:

var defaultCommentState = {
    login_status: false,
    author_name: '',
    author_email: '',
    author_url: 'https://google.com',
    content: '',
    post:null,
    parent:0
}
const addComment = (state = defaultCommentState, action) => {
    switch(action.type) {
        case 'ADD_COMMENT':
            return {
                ...state, 
                login_status: action.login_status,
                author_name: action.author_name,
                author_email: action.author_email,
                content: action.content,
                postid: action.postid,
                parentid: action.parentid
            }
        default:
            return state; 
    }
}

export default addComment; 

У меня есть компонент Comment List, где я могу знатьpostid, чтобы добавить Comment Form, соответствующий посту от postid.

class CommentList extends Component {
  constructor(props) {
    super(props);


    //In this component I can get postid like this.
    //I want to send this `postid` to store for using in another component.
    //How can I use Dispatch in this situation.

    var {postid} = this.props;


    this.state = {
      comments: [],
      page: 1,
      loadedDone: false,
      error: null,
    }
  }
   ....
   ....
}

   withRouter(CommentList)

Как я могу использовать Redux Dispatch в моем компоненте.Я извиняюсь, потому что я новичок в Redux, и я пытался, но не повезло.

Большое спасибо

Answer 1

У вас должен быть this.props.dispatch, в противном случае вы, скорее всего, забыли обернуть ваше приложение провайдером (из пакета 'redux-form')

ваш компонент должен выглядеть примерно так:

чтобы использовать действие, вы должны импортировать его

import myAction from './my-reducer';

, тогда у вас должна быть функция, которая вызывает это действие

invokeAction() {
  const { dispath } = this.props;
  dispatch(myAction());
}

РЕДАКТИРОВАТЬ:

import { Component } from 'react';
import { connect } from 'react-redux';
import { myAction } from './my-action';

class Test extends Component {
  render() {
    const { doSomething} = this.props;
    return <button onClick={ () => doSomething() } / >
  }
}

export default connect(
() => ({}), // Map state to props
dispatch => ({ doSomething: () => dispatch(myAction()) })
)(Test);