Question

我试图通过调用传递给我的子组件（QResults.js）的函数来更新其还原状态，但使用该函数时未达到我的reducer。 QResults.js有一个我正在单击的链接，我希望通过我的一个减速器来更改我的状态。我的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

您的动作不会将动作分派给减速器。您只是将其作为参数传递了。我还将参数的传递略微更新为称为“有效载荷”的键。尝试像这样更新它

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

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

export const QUEUE_NEW_REQUEST = "QUEUE_NEW_REQUEST";

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

使用dispatch（）

1 个答案: