Редуктор не вызывается при использовании dispatch () - PullRequest
Новая
       15

Редуктор не вызывается при использовании dispatch ()

0 голосов
/ 26 мая 2019

Я пытаюсь обновить свое состояние редукса из дочернего компонента (QResults.js), вызывая функцию, которую я передаю ему, но мой редуктор не достигается при использовании этой функции. 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
        }
    }
}

1 Ответ

1 голос
/ 26 мая 2019

Ваше действие не отправляет действие в редуктор. Вы только что передали это в качестве аргумента. Я также немного обновил передачу параметра до ключа под названием «полезная нагрузка». Попробуйте обновить его так

Я создал минимальную песочницу здесь

Если щелкнуть один из элементов и проверить консоль, вы увидите, что вызывается редуктор. 

export const QUEUE_NEW_REQUEST = "QUEUE_NEW_REQUEST";

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