CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
user12186973
user12186973

Reputation:

unable to receive the state in react component from redux

I am trying to display the redux state into my react component, but it comes undefined. I am unable to understand where am I doing the mistake. I am learning redux by trying a coding on my own by going through the redux documentation.

Main React component

import React, { Component } from 'react';
import Counter from './components/Counter';
import {Provider} from 'react-redux';
import store from './redux/store';

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <h1>COUNTER APPlICATION</h1>
          <Counter />
        </div>
      </Provider>
    )
  }
}

export default App;

React Component

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {addNumber} from '../redux/actions/addAction';
import {substractNumber} from '../redux/actions/substractAction';

export class Counter extends Component {
  render() {
    return (
      <div>
        <h1>Value:{this.props.value}</h1>
        <h1>Add Only Value:{this.props.addOnly}</h1>
        <button onClick = {() => this.props.addNumber}>+</button>
        <button onClick = {() => this.props.substractNumber}>-</button>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  value: state.value
});

export default connect(mapStateToProps, {addNumber, substractNumber})(Counter);

addReducer

import {ADDITION} from '../actions/actionTypes';

const initialState = {
  value: 50
}

export default function (state = initialState, action) {
  switch(action.type){
    case ADDITION:
      return{
        value: state.value + 2
      }
    default:
      return state
  }
}

substractReducer

import {SUBSTRACTION} from '../actions/actionTypes';

const initialState = {
  value: 50
}

export default function (state = initialState, action) {
  switch (action.type) {
    case SUBSTRACTION:
      return {
        value: state.value - 2
      }
      default:
        return state
  }
}

rootReducer

import {combineReducers} from 'redux';
import addReducer from './addReducer';
import substractReducer from './substractReducer';

export default combineReducers({
  add: addReducer,
  substract: substractReducer
})

store

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers/rootReducer';
import thunk from 'redux-thunk';

export default createStore(rootReducer, applyMiddleware(thunk));

action type

export const ADDITION = 'ADDITION';
export const SUBSTRACTION = 'SUBSTRACTION';

addAction

import {ADDITION} from './actionTypes';
export const addNumber = () => (dispatch) => {
  return dispatch({
    type: ADDITION,
    payload: 2
  })
}

substractAction

import {SUBSTRACTION} from './actionTypes';

export const substractNumber = () => (dispatch) => {
  return dispatch({
    type: SUBSTRACTION,
    payload: 2
  })
}

Upvotes: 1

Views: 44

Answers (2)

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22875

You are doing wrong.

  1. you state is just counter value, so don't split into two reducers. You only need two case statement, one for ADD, one for SUBTRACT.

  2. Don't use combineReducer and it you want, use one key like counter for counter reducer

  3. in mapStateToProp, get value like state.counter.value where counter is name of key you used in combineReducer({ counter: counterReducer })

  4. Your button actions/onclick is wrong

import {ADDITION, SUBTRACTION} from '../actions/actionTypes';

const initialState = {
  value: 50
}

export default function (state = initialState, action) {
  switch(action.type){
    case ADDITION:
      return 
        value: state.value + 2
      }
      
   case SUBTRACTION:
      return{
        value: state.value + 2
      }
    default:
      return state
  }
}

///// no need to regester 2 reducer, just add one above like this

export default combineReducers({
  counter: counterReducer
});

/// In Counter component , mapStateToProp
const mapStateToProps = state => ({
  value: state.counter.value
});

// Just pass redux actions to onClick in button like this
<button onClick = {this.props.addNumber}>+</button>
<button onClick = {this.props.substractNumber}>-</button>

Upvotes: 2

Davin Tryon
Davin Tryon

Reputation: 67296

When you combineReducers like this:

export default combineReducers({
  add: addReducer,
  substract: substractReducer
})

Your state tree will look like:

{
    add: {
        value: 0
    },
    subtract: {
        value: 0
    }
}

So you should only have a single reducer in order to reduce over the same value.

Upvotes: 0

Related Questions