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 optionallyownProps
- 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
andgetState
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/
出處:http://www.cnblogs.com/lightsong/ 本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線。