Why one state effected to another state during changing in React-Redux?

Question

i'm new in Redux.I have a problem, i make a simple Redux app with two different functionality one is increment decrement on the base of count and second is Click on button then image change, so that my real problem is when i update the state increment decrement first then working good but if i press the button click then again press to increment or decrement button then show me Error NAN in the place of increment decrement result 1 2 0r other And in the console show me bellow error:

Received NaN for the `children` attribute. If this is expected, cast the value to a string.

“I try many ways like dispatch the action many different ways but not working in any case for me.”

please check the code and guide me

constants.js

export const CLICK_ME = 'CLICK_ME'
export const INCREMENT  = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

action.js

import {CLICK_ME, INCREMENT, DECREMENT} from '../constant/constant'

export const clicking = () => {
  return {
    type:CLICK_ME
  }
}

export const increment =()=>{
  return {
    type : INCREMENT
  }
}


export const decrement =()=>{
  return {
    type : DECREMENT
  }
}

reducer.js

import {CLICK_ME, INCREMENT, DECREMENT} from '../constant/constant'

const initialState = {
  click : true,
  count: 0
}

const reducer = (state = initialState , action) => {
  if(action.type === CLICK_ME){
    return {click : !state.click}
  }
  else if(action.type === INCREMENT ){
    return { count: state.count + 1  }
  }
  else if(action.type === DECREMENT ){
    return {  count: state.count - 1  }
  }
  else return state
}

export default reducer

store.js

import reducer from '../reducers/reducer'
import { createStore } from 'redux'

const store = createStore(reducer)
export default store

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css'
import store from './store/store'
import { Provider } from 'react-redux'
ReactDOM.render(
    
        
    
  , document.getElementById('root'));
serviceWorker.unregister();

App.js

import React from 'react';

import {connect} from 'react-redux'
import { CLICK_ME, INCREMENT, DECREMENT } from './constant/constant';
function App(props) {
  return (
    
        
          
            { props.click ?   : }  
          
          
              THE NUMBER IS COUNT ON EVERY CLICK 
              {props.count}
          
        
        
        
       
      
    
  );
} 

const mapStateToProps = (state)=>{
    return {
      click : state.click,
      count : state.count
    }
}
const dispatchToProps = (dispatch) => {

  return  { 
    clicks:()=>dispatch({type:CLICK_ME}),
    increment :()=>dispatch({type:INCREMENT}),
    decrement :()=>dispatch({type:DECREMENT})
  }

}

export default connect(mapStateToProps,dispatchToProps)(App)

GregL · Accepted Answer

The key thing you are missing is that you need to return the whole state from your reducer function, not just the piece you modified with that action. That means copying over the properties you didn't modify.

Change your reducer function as follows (and I also suggest you use a switch statement, it's less typing and consistent with other Redux code):

import {CLICK_ME, INCREMENT, DECREMENT} from '../constant/constant'

const initialState = {
  click : true,
  count: 0
}

const reducer = (state = initialState , action) => {
  switch (action.type) {
    case CLICK_ME:
      return { ...state, click: !state.click };
    case INCREMENT:
      return { ...state, count: state.count + 1 };
    case DECREMENT:
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

export default reducer;

In case you are not familiar with it, the ...state is using the object spread operator, which copies all the properties and their values from state onto the new object. Alternatively, you can use the equivalent Object.assign({}, state, { modified: 'state' }).

Why one state effected to another state during changing in React-Redux?

Answers (2)

Related Questions