score:2
for what it's worth - do not pass around setstate
- that's an anti-pattern.
this is the common syntax/construction for connect regarding a component :
import { connect } from 'react-redux'
const todoitem = ({ todo, destroytodo }) => {
return (
<div>
{todo.text}
<span onclick={destroytodo}> x </span>
</div>
)
}
const mapstatetoprops = state => {
return {
todo: state.todos[0]
}
}
const mapdispatchtoprops = dispatch => {
return {
destroytodo: () =>
dispatch({
type: 'destroy_todo'
})
}
}
export default connect(
mapstatetoprops,
mapdispatchtoprops
)(todoitem)
per your question, let's break the syntax down a little easier without all of the properties and look at it as simply as possible :
(dispatch) => {
test : (dispatch, setstate /* don't do this */) => {
dispatch('do a thing')
}
}
score:7
the mapdispatchtoprops
is a simple function which returns an object. the object's key is a name of your method and value is your actual function.
your method should look like this:
const mapdispatchtoprops = dispatch => {
return {
foomethod: () => {},
barmethod: () => {},
};
};
connect(undefined, mapdispatchtoprops)(<your component>);
after that, you can get access to these methods via props
.
Source: stackoverflow.com
Related Query
- Passing multiple functions into mapDispatchToProps in redux connect function
- Why is Redux passing dispatch into the return function of an action?
- React redux passing event handler through connect & mapDispatchToProps vs. rendering child with props
- Passing multiple actions to mapDispatchToProps in Redux
- Passing values into the `next` function in Redux Saga
- Creating a Redux Observable Epic with multiple API Calls - Passing the results of the first into the second
- How to merge multiple functions into one function
- passing multiple functions inside main function
- Having issues passing data of a multiple fetch API into an array to access outside the function
- Jest/Enzyme Unit Testing: How to pass store to shallow component that uses redux 4 and react-redux 6 connect function
- Passing Multiple Arguments to Function in React
- connect redux function is not working with react-native
- Best practice when passing Redux state into components
- Redux - mapDispatchToProps - TypeError: _this.props.setCurrentUserHandle is not a function
- Passing an empty function into a React component
- How can I combine multiple combineReducers functions in Redux using something like immutable.js
- Redux connect function explanation
- passing multiple functions as callback in setState
- Passing a function down multiple children components in React using ES6
- passing multiple callback in a function
- Connect multiple redux sub-states to a React component
- Redux Form - multiple update function renders slow
- Passing multiple props and actions in react / redux
- How leetcode do this: Read user's input String as multiple JavaScript functions and run a main function with user's input params
- How does this arrow function work in my special case passing it through Redux
- Connect component to redux and multiple libraries during export
- Passing particular argument to a function having multiple arguments in React
- Learner Question: Functions for every text field. Is there a way to make a universal function that can handle multiple text fields
- Gets icon prop and passing it into styled() function
- connect multiple combined reducers in redux with conditional
More Query from same tag
- How to store user logged in state with React Redux
- Having an issue with e.target.value returning Undefined in React
- PropTypes error when using Styled Components
- How to split app and vendor code with Webpack
- How to create Material-UI nested style object from array using map in React
- "Error: Not supported" when caused by `import("react-markdown")`
- "React" how to pass event to adjacent component
- State is modified before state setter is called
- How to use react-select with redux-form?
- Why am I getting the error data.findIndex is not a function in my React with Redux project?
- Redux changing my initial state
- Cannot set property 'styles' of undefined in next js during add less support
- How to remove one specific query parameter from URL in Next.js?
- '\"node build\bundle.js\"' is not recognized as an internal or external command, operable program or batch file
- material-ui autocomplete duplicate key warning
- How to be autheticated in Django backend when autheticated in ReactJs frontend?
- React table not displaying data
- Cannot read property 'length' of null in React component
- How to handle null values when using availity-reactstrap-validation
- How to target a specific key in a JSON object then match by id in that key's array?
- How to convert recieved string to enum
- React TextField with collapse
- react-pdf text renders in different positions
- Accessing data from JSON returns "undefined"
- TypeScript type for value of key in object
- React Intl, how to add a number in a message?
- Reduce not removing correct array item
- highMaps map disappears when options are updated in react
- Trying to create a fetch request with react hooks, my data is still null
- How to pass function to a custom hook while writing unit test in Jest/React