Understanding React-Redux and mapStateToProps()
Q: Is this ok?
A: yes
Q: Is this expected?
Yes, this is expected (if you are using react-redux).
Q: Is this an anti-pattern?
A: No, this is not an anti-pattern.
It's called "connecting" your component or "making it smart". It's by design.
It allows you to decouple your component from your state an additional time which increases the modularity of your code. It also allows you to simplify your component state as a subset of your application state which, in fact, helps you comply with the Redux pattern.
Think about it this way: a store is supposed to contain the entire state of your application.
For large applications, this could contain dozens of properties nested many layers deep.
You don't want to haul all that around on each call (expensive).
Without mapStateToProps
or some analog thereof, you would be tempted to carve up your state another way to improve performance/simplify.
Understanding mapStateToProps & mapDispatchToProps in React-Redux
React components accept data from outside via props
.maptStateToProps
and mapDispatchToProps
, literally, pass the selected state properties and actions that are needed inside your component as props.
The state values and actions passed to the component are available in the props of the component.
In your example, you can use this.props.users
or this.props.deleteUser()
.
I don't understand how the connect in redux function works
Please read the docs first: https://react-redux.js.org/api/connect
I will give you the basic knowledge of redux so you can understand it properly
connect(mapStateToProps, mapDispatchToProps)(Component)
Here
connect is a function that connects your
redux
with your component and added yourredux state
andactions/dispatch
in your component props.where
mapStateToProps
is a function that gives you thestate as an argument
and you can accessall redux state
from there and you can access it usingthis.props.stateName
where
mapDispatchToProps
is a function that helps you to call your actions likethis.props.actionName
Understanding React Redux Reducer and MapstateToProps
I think the point that you are missing is when you combine your reducers, each one will have a key because they are objects.
In the file you combine your reducers, you probably have something like that:
import { combineReducers } from 'redux'import todos from './todos'import competitions from './competitions'
export default combineReducers({ todos, competitions})
React-Redux Class Component mapStateToProps error
Issue
You've named your state and your action both count
, the latter is the one injected as a prop.
const mapStateToProps = state => {
return {
count: state.count // <-- name conflict
}
}
const mapDispatchToProps = (dispatch) => {
return {
count: () => dispatch(action.Increment()) // <-- name conflict
}
}
Solution
Provide different names, count
for the state, maybe increment
for the action.
const mapStateToProps = state => ({
count: state.count,
});
const mapDispatchToProps = (dispatch) => ({
increment: () => dispatch(action.Increment())
})
mapStateToProps vs mapDispatchToProps
mapStateToProps
is a function that you would use to provide the store data to your component, whereas mapDispatchToProps
is something that you will use to provide the action creators as props to your component.
According to the docs:
If
mapStateToProps
argument is specified, the new component will
subscribe to Redux store updates. This means that any time the store
is updated,mapStateToProps
will be called. The results of
mapStateToProps
must be a plain object, which will be merged into
the component’s props.With
mapDispatchToProps
every action creator wrapped into a dispatch
call so they may be invoked directly, will be merged into the
component’s props.
A simple example would be
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
return { addTodo: bindActionCreators(addTodo, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(Todos);
React Redux - mapDispatchToProps called for every event in a map function
make sure to pass function references not actual calls so your function is not called on every render but when you actually click the button:
onClick={() => onSelectProject(project.id)}
Related Topics
Orderby Multiple Fields in Angular
Property 'Value' Does Not Exist on Type Eventtarget in Typescript
How to Check If Element Has Any Children in JavaScript
Where Should Ajax Request Be Made in Flux App
Jquery-Ui-Dialog - How to Hook into Dialog Close Event
JavaScript - Get Array Element Fulfilling a Condition
Chaining .Bind() Calls in JavaScript. Unexpected Result
How to Serve a File for Download with Angularjs or JavaScript
Call JavaScript Function from Url/Address Bar
Reactjs: Prevent Multiple Times Button Press
Reactjs Syntheticevent Stoppropagation() Only Works with React Events
Can't Access Cookies from Document.Cookie in Js, But Browser Shows Cookies Exist
JavaScript Es6 Cross-Browser Detection
Array Like Objects in JavaScript
Get Keys of JSON-Object in JavaScript