How to use a dispatch (react-redux) into class Component

Asked
Active3 hr before
Viewed126 times

9 Answers

reduxdispatchcomponentreact
90%

As the second argument passed in to connect, mapDispatchToProps is used for dispatching actions to the store.,With React Redux, your components never access the store directly - connect does it for you. React Redux gives you two ways to let components dispatch actions:,Connect: Dispatching Actions with mapDispatchToProps

connect()(MyComponent) // which is equivalent withconnect(null, null)(MyComponent)
// orconnect(mapStateToProps /** no second argument */)(MyComponent)
load more v
88%

For class components, you need to use connect method from react-redux. Use connect method and pass mapDispatchToProps function as shown below. ,Connect and share knowledge within a single location that is structured and easy to search.,Read thru the doc for more info. https://react-redux.js.org/api/connect

For class components, you need to use connect method from react-redux. Use connect method and pass mapDispatchToProps function as shown below.

import { connect } from 'react-redux';
class LoginPage extends Component {

    render() {
        return (
            <div>
                <TextInput/>
                <br/>
                <TextInput/>
                <br/>
                <Button onClick={() => {
                    this.props.singIn()
                }}>SING IN</Button>
            </div>
        );
    }
}



const mapDispatchToProps = (dispatch) => {
    return {
        signIn: () => dispatch(signIn())
    }
};
export default connect(null, mapDispatchToProps)(LoginPage)
72%

Using React-Redux to make dumb/smart components,In Javascript, Redux is used as state container for many apps, mostly with React. It relies on actions that get dispatched and listened by reducers, which update the state accordingly. ,The dispatch method is available on the store object. An action gets dispatched to trigger an update to the Redux store.

1// App.js
2import { createStore } from 'redux';
3import { MessageSender } from './MessageSender';
4import reducer from './reducer';
5
6const store = createStore(reducer);
7class App extends React.Component {
8 render() {
9 <MessageSender store={store} />
10 };
11};
load more v
65%

The dispatch method is a method of the store object. An action is dispatched to trigger an update to the store.,Expertises Produit Technologies Méthodologie ,Offres Conception stratégique Lancement d'un produit mobile Objets connectés

 

// App.jsimport { createStore } from 'redux';import { MessageSending } from './MessageSending';import reducer from './reducer';const store = createStore(reducer);class App extends React.Component { render() { <MessageSending store={store} /> };};
load more v
75%

Whether you want to get data from the Redux store, dispatch actions on the Redux store, or do both in your React component, you can make the component a container component by wrapping it in a higher-order component returned by connect().,Given that you already have a Redux store setup for your React application, here is how you can connect the app to the Redux store:,For you to actually use this component in your application, you will have to specify the Redux store the component must be connected to, otherwise, you will get an error.

areStatesEqual ? : (next: Object, prev: Object) => boolean;
areOwnPropsEqual ? : (next: Object, prev: Object) => boolean;
areStatePropsEqual ? : (next: Object, prev: Object) => boolean;
areMergedPropsEqual ? : (next: Object, prev: Object) => boolean;
40%

What we declared as state for this component:,The props for this component:,This is what your application should look like now (code is also here):

Pretag
 Pretag team - issue, fix, solve, resolve
22%

For example, a React class component like this:,Could be rewritten as a function component using Hooks like this:,Now, with the new React Redux Hooks instead of connect:

class Count extends React.Component {
  state = {
    count: 0
  };

  add = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.add}>Add</button>
      </div>
    );
  }
}
load more v
60%

This won't work if you render your app on server because you want to have different store instance per request on server. That's why we never recommend this approach in the docs.,This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out - you'll probably get a better answer faster. Thanks!,If I want to call store.dispatch(someAction) from a component file, what is the correct way to access the store instance?

...
const store = applyMiddleware(
   loggingMiddleware, // log every action
   thunk // making API requests from actions
)(createStore)(reducer);

export {
   store
};
...
load more v
48%

First, you are going to create actions. Actions are the messages that you send from a component to your store using a method called dispatch, which you’ll use in the next step.,Your Redux store is now all set up and ready for changes. In the next step you’ll dispatch actions from a component to update the data.,In this step, you’ll import and call your actions from your component. You’ll use a method called dispatch to send the action and you’ll dispatch the actions inside of event handlers for the form and the button.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "redux-dispatch" queries related to "How to use a dispatch (react-redux) into class Component"