反应redux bindActionCreators的用法

Question

i have a file inside action directory which is root.js. Root.js will compile all the others action inside, and i bind it with bindActionCreators

export const all = (store) => {
    AUTH: bindActionCreators(AUTH.actions, store.dispatch),
    ....: .....
}

From what i learned, bindActionCreators is for the purpose of auto dispatching the action. If that is the case, then how do i access it from smart component?

I see things like dispatch(action). But since now i already bind it globally, i dont think that i would need to specify dispatch anymore. How do i do it, or is there any part that i misunderstood? Thank you

Answer 1

bindActionCreators - will create an object of actions each wrapped with the dispatch.
It's good for passing them as refs to non-connected components that should not know anything about redux or dispatch .
Quote from the DOCS :

The only use case for bindActionCreators is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass dispatch or the Redux store to it.

So if you want that connected component to pass action creators to a dumb component, you can set an object via bindActionCreators and pass it with props to the dumb component.
Example:

const myActionCreators = bindActionCreators(Auth.myActions, dispatch)
<DumbComponent {...myActionCreators} />

Answer 2

The recommended approach is to have each connected component file import the action creators it needs, and use the "object shorthand" supported by connect :

import {addTodo, toggleTodo} from "./todoActions";

const actions = {addTodo, toggleTodo};

export default connect(null, actions)(TodoList);
// each TodoList instance now has this.props.addTodo and
// this.props.toggleTodo, which will dispatch actions when called.