React.js Невозможно получить свойство 'dispatch' с неопределенной или нулевой ссылкой

Question

Снимок экрана проблемы

Я сталкиваюсь с 'отправкой' неопределенной проблемы при выполнении приложения.

Нужно ли импортировать какую-либопакет для работы с диспетчеризацией в React.js?

ProgramManager.js: Это мой компонент, здесь я использую диспетчеризацию для вызова создателя действий.

import React from 'react';
import { bindActionCreators } from 'redux';

import {connect}  from 'react-redux'

import {postsActions,postsSelectors} from '../store/userList/index';    

class ProgramManager extends React.Component {

    constructor(props, context) {
        super(props, context);              
      }
    componentDidMount() {
        this.fetchPosts({});
    }    
    fetchPosts(params) {
        this.context.store.dispatch(postsActions.fetchPosts(params));
    }    

    render() {
        return (
            <div className="right-container">
               ....
            </div>    
        )        } 
}

function mapStatetoProps(state) {
    debugger;
    return {
        //users: state.Users
        params: postsSelectors.getParams(state),
        posts: postsSelectors.getPosts(state),
    };
}

export default connect(mapStatetoProps)(ProgramManager);

Store.js: Это мой файл корневого хранилища Redux.

import { applyMiddleware, createStore, combineReducers, compose } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
//import { hashHistory } from 'react-router';
import { routerMiddleware } from 'react-router-redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import rootEpic from './epics';

// const logger = createLogger({ collapsed: true });

const epicMiddleware = createEpicMiddleware();

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

epicMiddleware.run(rootEpic);

export default createStore(
    rootReducer,
    composeEnhancers(
        applyMiddleware(
            epicMiddleware,
            logger,
          //  routerMiddleware(hashHistory),
            thunk,
        )
    )
);

epics.js Это мой корневой эпос, объединяющий все субэпические файлы

import { combineEpics } from 'redux-observable';
import { values } from 'lodash';

import * as postsEpics from './userList/epic';

export default combineEpics(
  ...values(postsEpics)
);

reducer.js Это мой корневой редуктор, который объединяет все вспомогательные редукторы.

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';


import posts from './userList/reducer';

export default combineReducers({
  posts,
  routing: routerReducer,
});

epic.js Этот субэпический файлкоторый на самом деле получает данные с сервера.

import { keyBy } from 'lodash';
import axios from 'axios';
import querystring from 'querystring';
import { Observable } from 'rxjs/Observable';
import { push } from 'react-router-redux';

import * as actionTypes from './actionType';
import * as postsActions from './actionCreator';
//import * as RequestModel  from './request.model';


export function fetchPosts(action$) {
    debugger;
    alert('fetchPosts');
    //RequestModel.entity = "sample";
    return action$.ofType(actionTypes.FETCH_COLLECTION)
        .map(action => action.payload)
        .switchMap(params => {
            return Observable.fromPromise(
                   axios.get(`http://localhost:8081/posts?${querystring.stringify(params)}`)
              //  axios.get('http://localhost:4040/admin/getTenantUsers')
            ).map(res => postsActions.fetchPostsSuccess(res.data, params));
        });
}

actionCreation.js именно здесь диспетчер вызвал данные о состоянии из post

import { keyBy } from 'lodash';
import * as actionTypes from './actionType';


export function fetchPosts(payload) {
    debugger;
    return { type: actionTypes.FETCH_COLLECTION, payload };
}


export function fetchPostsSuccess(posts, params) {
    debugger;
    const byId = keyBy(posts, (post) => post.id);
    return {type: actionTypes.FETCH_COLLECTION_SUCCESS, payload: {byId, params}};
  }

Answer 1

React-Redux обеспечивает dispatch при подключении ваших компонентов.Таким образом, вам не нужно использовать store в контексте для отправки действий.Вы можете просто сделать this.props.dispatch(actionCreator()) в своих подключенных компонентах.

Обратите внимание, что он предоставляет dispatch вашему компоненту, только если вы не передаете свои mapDispatchToProps.то есть, когда вы делаете

connect(mapStateToProps)(Component)
// or
connect()(Component)

// and not
connect(mapStateToProps, mapDispatchToProps)(Component)

Если вы предоставите mapStateToProps, вы должны указать создателей действий и обернуть их вокруг dispatch, поэтому вам не нужно dispatch дляручные рассылки больше.

Answer 2

Я никогда не использовал объект контекста для отправки действия.

Я думаю, что лучший способ подготовить действие к отправке - использовать mapDispatchToProps в качестве второго аргумента вашей оболочки connect, это принесет ваше действие в качестве опоры.

import React from 'react';
import { bindActionCreators } from 'redux';

import {connect}  from 'react-redux'

import {postsActions,postsSelectors} from '../store/userList/index';    

class ProgramManager extends React.Component {
    componentDidMount() {
        this.props.fetchPosts();
    }    

    render() {
        return (
            <div className="right-container">
               ....
            </div>    
        )        } 
}

function mapStatetoProps(state) {
    debugger;
    return {
        //users: state.Users
        params: postsSelectors.getParams(state),
        posts: postsSelectors.getPosts(state),
    };
}

function mapDispatchToProps() {
     return postsActions
}    
export default connect(mapStatetoProps, mapDispatchToProps)(ProgramManager);

mapDispatchToProps - это обычно функция, которая просто возвращает объект javascript с вашими создателями действий, такими как:

{
    fetchPosts: postActions.fetchPosts,
    ...
}

Вот почему вы можете даже пойти более прямо (и не нужно объявлять функцию mapDispatchToProps):

export default connect(mapStatetoProps, postActions)(ProgramManager);