# React with Redux AND a second component! Need advice.

**URL:** <https://forum.kirupa.com/t/react-with-redux-and-a-second-component-need-advice/639722>\
**Category:** programming\
**Created:** [April 25, 2019, 4:28pm UTC](https://forum.kirupa.com/t/react-with-redux-and-a-second-component-need-advice/639722 "2019-04-25T16:28:06Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sigb0y\_The\_Insane](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@Sigb0y\_The\_Insane](https://forum.kirupa.com/u/Sigb0y_The_Insane)\
**Post date:** [April 25, 2019, 4:28pm UTC](https://forum.kirupa.com/t/react-with-redux-and-a-second-component-need-advice/639722/1 "2019-04-25T16:28:07Z")

</div>

I have done the sample from chapter 20. All is fine. Now I want to introduce a second component ( **TestComponent** ) which does the same like the Counter component.

**index.js**

> ReactDOM.render(  
> \<Provider store={store}\>  
> \<App/\>  
> \< **TestComponent** /\>  
> \</Provider\>,  
> destination  
> );

**TestComponent.js**

```
import React, {Component} from 'react';
import { connect } from 'react-redux';

class TestComponent extends Component {

  render() {
    return (
      <div className="container">
        <button className="buttons" onClick={this.props.decreaseCount}>-</button>
        <span>Test: {this.props.countValue}</span>
        <button className="buttons" onClick={this.props.increaseCount}>+</button>
      </div>
    );
  }
}

export default connect()(TestComponent);

```

So the **buttons** are not working and the **countValue** is not visible. How to solve this?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 25, 2019, 6:39pm UTC](https://forum.kirupa.com/t/react-with-redux-and-a-second-component-need-advice/639722/2 "2019-04-25T18:39:41Z")

</div>

You need to pass the appropriate map state/dispatch values into `connect()`

---

<div class="post-metadata">

**Author:** ![Sigb0y\_The\_Insane](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@Sigb0y\_The\_Insane](https://forum.kirupa.com/u/Sigb0y_The_Insane)\
**Post date:** [April 26, 2019, 7:37am UTC](https://forum.kirupa.com/t/react-with-redux-and-a-second-component-need-advice/639722/3 "2019-04-26T07:37:56Z")

</div>

Great, and how can I do that? In this component there aren’t any of these values. They are declared inside App.js and I do not want to do copy & paste these functions in my TestComponent file.

```
function mapDispatchToProps(dispatch) {
  return {
    increaseCount: function() {
      return dispatch(increaseAction);
    },
    decreaseCount: function() {
      return dispatch(decreaseAction);
    }
  };
} 

function mapStateToProps(state) {
  return {
    countValue: state.count
  };
}
```

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 26, 2019, 12:02pm UTC](https://forum.kirupa.com/t/react-with-redux-and-a-second-component-need-advice/639722/4 "2019-04-26T12:02:15Z")

</div>

> [@Sigb0y\_The\_Insane](#):
>
> I do not want to do copy & paste these functions

Thats basically what you need to do. But you can reduce the redundancy by defining these operations in a separate file (or files) and importing them into each place where they’re needed. And this can be simplified a little more using the [object version of mapDispatchToProps](https://react-redux.js.org/using-react-redux/connect-mapdispatch#defining-mapdispatchtoprops-as-an-object).

```auto
import { increaseActionCreator, decreaseActionCreator } from './actionCreators';
import { getCount } from './selectors';

// ...

const mapDispatchToProps = {
    increaseCount: increaseActionCreator,
    decreaseCount: decreaseActionCreator
};

function mapStateToProps (state) {
    return {
        countValue: getCount(state)
    };
}

```

And if you don’t rename the action creator functions to something different, the object shorthand helps shorten it as well

```auto
import { increaseCount, decreaseCount } from './actionCreators';

// ...

const mapDispatchToProps = {
    increaseCount,
    decreaseCount
};

```

---

<div class="post-metadata">

**Author:** ![Sigb0y\_The\_Insane](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@Sigb0y\_The\_Insane](https://forum.kirupa.com/u/Sigb0y_The_Insane)\
**Post date:** [April 26, 2019, 12:12pm UTC](https://forum.kirupa.com/t/react-with-redux-and-a-second-component-need-advice/639722/5 "2019-04-26T12:12:31Z")

</div>

Thanks, this sounds to that what i want. So one problem, can you show me please the content of the “./actionCreators” ? I am not sure what i have to code inside this file.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 26, 2019, 12:15pm UTC](https://forum.kirupa.com/t/react-with-redux-and-a-second-component-need-advice/639722/6 "2019-04-26T12:15:19Z")

</div>

Action creators are functions that return action objects - the values you have as `increaseAction` and `decreaseAction`. They’re automatically wrapped in `dispatch()` for you as a result of using the object syntax, so one less thing to worry about.

> **[Actions · Redux](https://redux.js.org/basics/actions#action-creators)**
>
> Actions

---

<div class="post-metadata">

**Author:** ![Sigb0y\_The\_Insane](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@Sigb0y\_The\_Insane](https://forum.kirupa.com/u/Sigb0y_The_Insane)\
**Post date:** [April 26, 2019, 2:04pm UTC](https://forum.kirupa.com/t/react-with-redux-and-a-second-component-need-advice/639722/7 "2019-04-26T14:04:05Z")

</div>

Alright, the solution was quite simple. Just add “ **export** ” to **mapStateToProps** and **mapDispatchToProps** functions inside App.js . Than in any new component, you can import them with:

`import {mapDispatchToProps, mapStateToProps} from "./App";`

and make them usable by adding this at the end of the component file:

```
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TestComponent)

```

So these functions are defined on a centralized place and can be used on each Component.  
Thanks for helping!