My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Why is my application state not updating (redux)

mohammad c's photo
mohammad c
·Feb 10, 2018

Hi, I am following the beginner redux counter tutorial, and had followed the steps - but my applications state is seemingly not updating. To be more clear, essentially the application is a counter with an increment button and a decrement button and it displays the current value on the screen.

I can get it to console log the value as it changes, but it doesn't output it on the screen. Can anyone tell me what I'm doing wrong

import React, { Component } from 'react';
import { createStore } from 'redux';


const counter = (state = 0, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state -1;
    default:
      return state;
  }
}
const store = createStore(counter);
store.subscribe(()=>{
  console.log(store.getState());
});
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Counter Application</h1>
        <hr/>

        <Counter 
          value={store.getState()}
          onIncrement={() => store.dispatch({type: 'INCREMENT'})} 
          onDecrement={() => store.dispatch({type: 'DECREMENT'})} 
        />
      </div>
    );
  }
}


const Counter = ({
  value, 
  onIncrement,
  onDecrement
}) => {
  return(
    <div>
      <h1>{value}</h1>
      <button onClick={onIncrement}> Plus </button>
      <button onClick={onDecrement}> Minus </button>
    </div>
  )
}


export default App;