Reputation: 590
I am trying to update my redux state from a child component(QResults.js
) by calling a function that I pass to it but my reducer isn't being reached when I use the function. QResults.js
has a link that I am clicking which I expect to alter my state via one of my reducers. Am I doing something wrong with my mapDispatchToProps() function?
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
}
}
}
Upvotes: 0
Views: 1540
Reputation: 1683
Your action doesn't dispatch the action to the reducer. You just passed it in as an argument. I also slightly updated the pass of the param to a key called "payload". Try updating it like this
I've created a minimal sandbox here
If you click on one of the items and check your console you can see the reducer is being called.
export const QUEUE_NEW_REQUEST = "QUEUE_NEW_REQUEST";
export function queueNewRequest(newRequestInfo) {
return dispatch =>
dispatch({
type: QUEUE_NEW_REQUEST,
payload: newRequestInfo
});
}
Upvotes: 1