使用 dispatch() 时未调用 Reducer

Question

我试图QResults.js通过调用我传递给它的函数来从子组件（）更新我的 redux 状态，但是当我使用该函数时我的减速器没有被到达。QResults.js有一个我正在点击的链接，我希望通过我的一个减速器来改变我的状态。我的 mapDispatchToProps() 函数做错了吗？

频道.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>

        )

    }

}

Answer 1

您的操作不会将操作分派给减速器。你只是将它作为参数传入。我还将参数的传递稍微更新为一个名为“payload”的键。尝试像这样更新它我在这里创建了一个最小的沙箱如果您单击其中一项并检查您的控制台，您可以看到正在调用减速器。export const QUEUE_NEW_REQUEST = "QUEUE_NEW_REQUEST";export function queueNewRequest(newRequestInfo) {&nbsp; return dispatch =>&nbsp; &nbsp; dispatch({&nbsp; &nbsp; &nbsp; type: QUEUE_NEW_REQUEST,&nbsp; &nbsp; &nbsp; payload: newRequestInfo&nbsp; &nbsp; });}