mapDispatchToProps of react-redux, and integration with redux-thunk

mapDispatchToProps of react-redux

https://react-redux.js.org/using-react-redux/connect-mapdispatch

Two Forms of mapDispatchToProps​

The mapDispatchToProps parameter can be of two forms. While the function form allows more customization, the object form is easy to use.

• Function form: Allows more customization, gains access to dispatch and optionally ownProps
• Object shorthand form: More declarative and easier to use

Function form

const increment = () => ({ type: 'INCREMENT' })
const decrement = () => ({ type: 'DECREMENT' })
const reset = () => ({ type: 'RESET' })

const mapDispatchToProps = (dispatch) => {
  return {
    // dispatching actions returned by action creators
    increment: () => dispatch(increment()),
    decrement: () => dispatch(decrement()),
    reset: () => dispatch(reset()),
  }
}

Object shorthand form

const mapDispatchToProps = {
  increment,
  decrement,
  reset,
}

2 -> 1

对于第二种情况，会翻译为 如下代码， 引用 bindActionCreators

import { bindActionCreators } from 'redux'
// ...

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    ...bindActionCreators({ increment, decrement, reset }, dispatch),
  }
}

bindActionCreators 效果演示：

import { bindActionCreators } from 'redux'

const increment = () => ({ type: 'INCREMENT' })
const decrement = () => ({ type: 'DECREMENT' })
const reset = () => ({ type: 'RESET' })

// binding an action creator
// returns (...args) => dispatch(increment(...args))
const boundIncrement = bindActionCreators(increment, dispatch)

// binding an object full of action creators
const boundActionCreators = bindActionCreators(
  { increment, decrement, reset },
  dispatch
)
// returns
// {
//   increment: (...args) => dispatch(increment(...args)),
//   decrement: (...args) => dispatch(decrement(...args)),
//   reset: (...args) => dispatch(reset(...args)),
// }

2 core is action creater

此函数调用后， 产生 action 对象。

const increment = () => ({ type: 'INCREMENT' })
const decrement = () => ({ type: 'DECREMENT' })
const reset = () => ({ type: 'RESET' })

redux-thunk

https://redux.js.org/tutorials/fundamentals/part-6-async-logic#redux-async-data-flow

https://redux.js.org/usage/writing-logic-thunks

What is a "thunk"?​

The word "thunk" is a programming term that means "a piece of code that does some delayed work". Rather than execute some logic now, we can write a function body or code that can be used to perform the work later.

For Redux specifically, "thunks" are a pattern of writing functions with logic inside that can interact with a Redux store's dispatch and getState methods.

const thunkFunction = (dispatch, getState) => {
  // logic here that can dispatch actions or read state
}

store.dispatch(thunkFunction)

Thunk action creators and thunk functions

// fetchTodoById is the "thunk action creator"
export function fetchTodoById(todoId) {
  // fetchTodoByIdThunk is the "thunk function"
  return async function fetchTodosThunk(dispatch, getState) {
    const response = await client.get(`/fakeApi/todo/${todoId}`)
    dispatch(todosLoaded(response.todos))
  }
}

function TodoComponent({ todoId }) {
  const dispatch = useDispatch()

  const onFetchClicked = () => {
    // Calls the thunk action creator, and passes the thunk function to dispatch
    dispatch(fetchTodoById(todoId))
  }
}

reference：

https://daveceddia.com/redux-mapdispatchtoprops-object-form/