Understanding React-Redux and Mapstatetoprops()

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

  1. connect is a function that connects your redux with your component and added your redux state and actions/dispatch in your component props.

  2. where mapStateToProps is a function that gives you the state as an argument and you can access all redux state from there and you can access it using this.props.stateName

  3. where mapDispatchToProps is a function that helps you to call your actions like this.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



Leave a reply



Submit