如何将 object 传递给 react-redux

Question

I'm a little confused on passing an object to the redux store. I have successfully created the store and can add items from the initial state. The function also fires when called

Action:

import { GET_ITEM } from './OrderTypes'

export const getItem = (payload) => {
    return {
        type: GET_ITEM,
        payload: { payload }
    }
}

Reducer:

import { GET_ITEM } from './OrderTypes'

const initialState = {
    orderList: [],   
}

const orderReducer = (state = initialState, action) => {
    switch (action.type) {
        case GET_ITEM: return {
            ...state,            
            orderList: [...state.orderList, action.payload]           
        }
        default: return state        
    }
}

export default orderReducer

Component:

class TestComponentextends Component {

  pushItem = () => {
    this.props.getItem({
      payload: 'test object'
    })
  }

  render() {
    return (
      <input type='button' value='test btn' onClick={this.pushItem} />
    )
  }
}

const mapStateToProps = state => {
  return {
    orderList: state.orderList
  }
}

const mapDispatchToProps = dispatch => {
  return {
    getItem: () => dispatch(getItem())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TestComponent)

What happens: An empty object is added to the orderList array.

What I want to happen: Store the object in pushItem in the orderList array.

Answer 1

Your mapDispatchToProps doesn't pass the arguments to the action creator ( see mapDispatchToProps function arguments - 2nd example):

const mapDispatchToProps = dispatch => ({
  getItem: (...args) => dispatch(getItem(...args))
})

Even easier is to let react-redux handle the mapping by using mapDispatchToProps as an object :

const mapDispatchToProps = {
  getItem
}