javascript - 使用dispatch()时没有调用Reducer

Question

我试图通过调用传递给子组件(QResults.js)的函数来更新我的 redux 状态，但当我使用该函数时，我的 reducer 未到达。 QResults.js 有一个链接，我点击该链接希望通过我的一个 reducer 来改变我的状态。我的 mapDispatchToProps() 函数做错了什么吗？

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

您的操作不会将操作分派(dispatch)给 reducer 。您刚刚将其作为参数传入。我还稍微更新了参数传递到名为“payload”的键。尝试像这样更新

我创建了一个最小的沙箱 here

如果您单击其中一项并检查控制台，您可以看到正在调用 reducer 。

export const QUEUE_NEW_REQUEST = "QUEUE_NEW_REQUEST";

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