使用dispatch（）时未调用reducer

Question

I am trying to update my redux state from a child component( QResults.js ) by calling a function that I pass to it but my reducer isn't being reached when I use the function. QResults.js has a link that I am clicking which I expect to alter my state via one of my reducers. Am I doing something wrong with my mapDispatchToProps() function?

Channel.js

class Channel extends Component {
    ...
    render() {  
        return (
        ...
         <div>
            <QResults
             allQueryResults={this.state.queryState}
             requestHandler={queueNewRequest}/>
         </div>
        );
    }
}

function mapStateToProps(state) {
   ...
}

 function mapDispatchToProps(dispatch) {
    return ({
        queueNewRequest: (newRequestData) => { dispatch(queueNewRequest(newRequestData)) }
    })
} 

export default withRouter(connect(mapStateToProps , mapDispatchToProps )(Channel))

QResults.js

export default class QResults extends Component {
    render() {
        const {requestHandler} = this.props

        return (
            <ul>
                {this.props.allQueryResults.items.map((trackAlbum, i) =>
                    <li key={i}>
                        <a href='#' 
                        onClick={
                            () => requestHandler(trackAlbum.name)}>
                            Some link
                        </a>
                    </li>
                )}
            </ul>
        )
    }
}

Reducers.js

import { combineReducers } from 'redux'

function reducer1(state = {}, action) {
    ...
}

function reducer2(state = {}, action) {
    switch (action.type) {
        case QUEUE_NEW_REQUEST:
            return{
                ...state,
                newRequestInfo : action.newRequestInfo
            }
        default:
            return state
    }
}

const rootReducer = combineReducers({
    reducer1,
    reducer2
})

export default rootReducer

Actions.js

export const QUEUE_NEW_REQUEST = 'QUEUE_NEW_REQUEST'

export function queueNewRequest(newRequestInfo) {
    return dispatch  => {
        return {
            type: QUEUE_NEW_REQUEST,
            newRequestInfo
        }
    }
}

Answer 1

Your action doesn't dispatch the action to the reducer. You just passed it in as an argument. I also slightly updated the pass of the param to a key called "payload". Try updating it like this

I've created a minimal sandbox here

If you click on one of the items and check your console you can see the reducer is being called.

export const QUEUE_NEW_REQUEST = "QUEUE_NEW_REQUEST";

export function queueNewRequest(newRequestInfo) {
  return dispatch =>
    dispatch({
      type: QUEUE_NEW_REQUEST,
      payload: newRequestInfo
    });
}