Question

在执行应用程序时，我遇到未定义的“派遣”问题。

我是否需要导入任何软件包以在React.js中使用分派？

ProgramManager.js：这是我的组件，这是我使用分派调用操作创建者的地方。

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

Store.js：这是我的Redux Root Store文件。

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

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

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

epics.js 这是我的根史诗，它结合了所有子史诗文件

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


import posts from './userList/reducer';

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

reducer.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));
        });
}

epic.js 这是实际上从服务器获取数据的子史诗文件。

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

actionCreation.js ，这是Disptacher调用以从帖子中获取状态数据的地方

-X

Answer 1

我从未使用过上下文对象来调度动作。

我认为准备发送动作的最好方法是使用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);

Answer 2

在连接组件时，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进行手动分派。 / p>

React.js无法获取未定义或空引用的属性“ dispatch”

2 个答案: