使用 dispatch() 时未调用 Reducer

Question

我正在尝试通过调用我传递给它的函数从子组件 (QResults.js) 更新我的 redux 状态，但是当我使用该函数时没有到达我的 reducer。 QResults.js 有一个 link 我正在点击它，我希望通过我的一个减速器改变我的状态。我的 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

您的操作没有将操作分派给减速器。您只是将其作为参数传入。我还略微将参数的传递更新为一个名为 "payload" 的键。尝试像这样更新它

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

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

export const QUEUE_NEW_REQUEST = "QUEUE_NEW_REQUEST";

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

使用 dispatch() 时未调用 Reducer

Reducer not being called when using dispatch()

javascript

reducers

reactjs

redux