Pass arguments in redux - redux

Question

I want to pass an argument in redux but I didn't found the way to do it.
Here's my code:
redux/actions
export const next_page = (max_page) => {
return {
type: NEXT_PAGE,
payload: max_page
}
}
redux/middleware
export const update_page = (dispatch) => next => action => {
next(action)
if (action.type === NEXT_PAGE) {
dispatch(next_page({max_page: action.payload}))
}
}
redux/reducer
export default (page = 1, action) => {
switch (action.payload) {
case NEXT_PAGE:
const nextPage = page + 1
return nextPage <= action.payload ? nextPage : page
default:
return page
}
}
Calling the component
<ChangePage max={this.state.max_pages} {...{prevPage, nextPage, page}} />
const mapStateToProps = state => ({
page: state.page,
})
const mapDispatchToProps = (dispatch) => ({
nextPage: () => dispatch(next_page()),
})
export default connect(mapStateToProps, mapDispatchToProps)(Home)
ChangePage component
<button onClick={() => this.props.nextPage(max_page)}>Next</button>
The problem is that I don't know how to pass the argument max_page to use it in redux/reducer

Answer 1

You just need to pass max_page through your nextPage prop in mapDispatchToProps:
const mapDispatchToProps = (dispatch) => ({
nextPage: max_page => dispatch(next_page(max_page)),
})
Then, when you invoke it inside of the ChangePage component your max_page argument will already be passed through.
In addition, note that you don't need a middleware to re-dispatch the action again (this will result in an infinite loop):
// Just delete the middleware
And your reducer should be switching on action.type, not action.payload:
// redux/reducer
export default (page = 1, action) => {
switch (action.type) { // changed from action.payload
case NEXT_PAGE:
const nextPage = page + 1
return nextPage <= action.payload ? nextPage : page
default:
return page
}
}