Combined Reducers not updating State in Component

[raza2022]

@stylesuxx Thanks for the great work I have a issue with combined reducers, that is not working my state. for simplicity i just replaced my complex example with the basic counter example given every where. so my code look like counter.js

import {} from '../actions/const';

const initialState = {};

function reducer(state = 0, action) {
  /* Keep the reducer clean - do not mutate the original state. */
  // const nextState = Object.assign({}, state);

  switch (action.type) {
    case 'ADD_ITEM':
      return state + 1;
    case 'REMOVE_ITEM':
      return state - 1;
    default: {
      /* Return original state if no actions were consumed. */
      return state;
    }
  }
}

module.exports = reducer;

and here is the reducers.js

import { combineReducers } from 'redux';
import counter from '../reducers/counter.js';
const reducers = { counter };
const combined = combineReducers(reducers);
module.exports = combined;

and here is my full code of Counter.js in components

import React from 'react';
import cssmodules from 'react-css-modules';
import styles from './counter.cssmodule.scss';

class Counter extends React.Component {

  increment() {
    this.props.store.dispatch({
      type: 'ADD_ITEM'
    });
  }
  decrement() {
    this.props.store.dispatch({
      type: 'REMOVE_ITEM'
    });
  }

  render() {
    return (
      <div className="counter-component" styleName="counter-component">
        <h3>the counter should be updated</h3>
        <h1>{this.props.store.getState().counter}</h1>
        <button className="btn" styleName="counter-btn" onClick={this.increment.bind(this)}>+</button>
        <button className="btn" styleName="counter-btn" onClick={this.decrement.bind(this)}>-</button>
      </div>
    );
  }
}

Counter.displayName = 'ButtonsCounter';
Counter.propTypes = {};
Counter.defaultProps = {};

export default cssmodules(Counter, styles);

[andytango]

Hey @raza2022, do you have a container to connect the component to your redux store? What type of error are you getting?

[raza2022]

@andytango Thanks i just updated the state and it working fine, does it means component render only on state change not on props? here is my updated code for Counter.js in components may help some nob like me :)

class Counter extends React.Component {

  constructor() {
    super();
    this.state = {
      counter: 0
    }
  }

  increment() {
    this.props.store.dispatch({
      type: 'ADD_ITEM'
    });
    this.setState({counter: this.props.store.getState().counter})
  }
  decrement() {
    this.props.store.dispatch({
      type: 'REMOVE_ITEM'
    });
    this.setState({counter: this.props.store.getState().counter})
  }

  render() {
    let counter = this.state.counter;
    return (
      <div className="counter-component" styleName="counter-component">
        <h3>the counter should be updated</h3>
        <h1>{counter}</h1>
        <button className="btn" styleName="counter-btn" onClick={this.increment.bind(this)}>+</button>
        <button className="btn" styleName="counter-btn" onClick={this.decrement.bind(this)}>-</button>
      </div>
    );
  }
}