Setting up react-redux with react

Question

I am trying to get my head around implementing redux into react. I understand the basics as to how stores, reducers and actions work. I am now trying to set up react-redux. I know there is quite a bit of documentation online, and as well as it is explained, it is slightly tricky to follow.

Here is what I have tried below, but it is not working. Can anyone spot some obvious mistake. I think I am close, but have made some small errors. Nothing is rendering on the screen at all.

Here is a jsiddle.

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { connect } from 'react-redux';

function counter(state = 0, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}
var store = createStore(counter);

const mapStateToProps = function(store) {
  return {
    count: store.getState()
  };
}

class App extends React.Component {
    increaseCounter() {
        store.dispatch({
            type: 'INCREMENT'
        })
    }
    render() {
        return (
            <div>
                <h1>Test</h1>   
                <h1>{this.props.count}</h1>
                <button onClick={this.increaseCounter.bind(this)}>Click here </button>
            </div>
        )
    }   
}
connect(mapStateToProps)(App);
ReactDOM.render(
    <App />
    , document.getElementById('app')
);

After looking into the code above. I found that this.increaseCount.bind(this) which should be this.increaseCounter.bind(this). Please check into the code once. — duwalanise
– duwalanise, Commented Jan 6, 2017 at 11:22
It looks fine. Any errors in the console? Do you have an element by the id of "app" available on the page? — Chris
– Chris, Commented Jan 6, 2017 at 11:25
@Chris no error, just not rendering. Do I need to use a provider also to get it to work with react-redux? — user6002037
– user6002037, Commented Jan 6, 2017 at 11:27

blckt · Accepted Answer · 2017-01-06 11:33:16Z

1

You importing your Component without connect

connect(mapStateToProps)(App);
ReactDOM.render(
    <App />
    , document.getElementById('app')
);

Try this

ReactDOM.render(
 connect(mapStateToProps)(App)
 , document.getElementById('app')
);

Or this

  const ConnectedApp = connect(mapStateToProps)(App);
  ReactDOM.render(
   <ConnectedApp/>,
   document.getElementById('app')
);

answered Jan 6, 2017 at 11:33

blckt

811 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6002037 Over a year ago

it still doesn't show the value of the redux state - see js fiddle here - jsfiddle.net/ypnnkjk7/44

duwalanise · Accepted Answer · 2017-01-06 12:12:57Z

0

We have to connect our component with the redux-store to use store which is done by connecting the component with the require part of store object in this case store itself.

const mapStateToProps = function(store) {
  return {
    users: store
  };
}

const ConnectedApp = connect(mapStateToProps)(App);

if we had store object like

{
   counter: 0,
   ...   
 }

we can get counter as

const mapStateToProps = function(store) {
  return {
    counter: store.counter
  };
}

And the next thing is we have to provide the store object to the connected component. This is done be wrapping the component with Provider.

<Provider store={store}>
   <ConnectedApp />
</Provider>

Note : After wrapping the component with Provider. We can access store object not only inside the direct Component but also all its decendent component. But it should be connected as the above one.

I have updated your fiddle. Please take a look jsfiddle

const { Component } = React;
const { combineReducers } = Redux;
const { createStore } = Redux;
const { connect, Provider } = ReactRedux;

function counter(state = 0, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}

var store = createStore(counter);

const mapStateToProps = function(store) {
  return {
    users: store
  };
}

class App extends React.Component {

    increaseCounter() {
        store.dispatch({
            type: 'INCREMENT'
        })
    }

    render() {
  console.log(this.props)
        return (
            <div>
                <h1>Test</h1>   
                <h1>{this.props.users}</h1>
                <button onClick={this.increaseCounter.bind(this)}>Click here</button>
            </div>
        )
    }   
}
const ConnectedApp = connect(mapStateToProps)(App);
ReactDOM.render(
  <Provider store={store}>
    <ConnectedApp />
  </Provider>
    , document.getElementById('app')
);

edited Jan 6, 2017 at 12:12

answered Jan 6, 2017 at 11:46

duwalanise

1,3021 gold badge14 silver badges24 bronze badges

3 Comments

user6002037 Over a year ago

in case someone comes along with the same issue do you want to explain what you changed?

duwalanise Over a year ago

So the first thing i did was connected the app component const ConnectedApp = connect(mapStateToProps)(App); and wrapped the connected component with provider passing the store. <Provider store={store}> <ConnectedApp /> </Provider>

user6002037 Over a year ago

best to explain in the question so the next person will see it

Chris · Accepted Answer · 2017-01-06 11:47:24Z

0

You have a <button/> closing element, instead of a </button>, which would prevent anything from rendering.

EDIT The question has changed, so hence an edit:

const { Component } = React;
const { combineReducers } = Redux;
const { createStore } = Redux;
const { connect, Provider } = ReactRedux;

function counter(state = 0, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}
var store = createStore(counter);

const mapStateToProps = function(state) {
console.log(state)
  return {
    count: state
  };
}

class App extends React.Component {
    increaseCounter() {
        store.dispatch({
            type: 'INCREMENT'
        })
    }
    render() {
        return (
            <div>
                <h1>Test</h1>   
                <h1>{this.props.count}</h1>
                <button onClick={this.increaseCounter.bind(this)}>Click here </button>
            </div>
        )
    }   
}
const CApp = connect(mapStateToProps)(App);
ReactDOM.render(
    <Provider store={store}><CApp /></Provider>
    , document.getElementById('app')
);

There were a few things wrong with the original code:

missing the Provider wrapper
not using the connected component

edited Jan 6, 2017 at 11:47

answered Jan 6, 2017 at 11:28

Chris

58.9k34 gold badges158 silver badges198 bronze badges

2 Comments

user6002037 Over a year ago

thanks chris. well spotted. However, the redux part is still not working. Can you see anything wrong with this?

Chris Over a year ago

Can you set it up in a codepen or jsbin? it will make it easier to debug

Collectives™ on Stack Overflow

Setting up react-redux with react

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related