CODEWITHSUNDEEP
javascriptreactjsreduxreducersreact-redux
Charlie-Greenman
Charlie-Greenman

Reputation: 1659

dispatch action triggering, but redux store not updating

Currently in my React-Redux app, I would like to use React to set the state of show to either false, or true. When set to true, the app will initialize. (There are multiple components, so it would make sense to do this using react/redux.)

However, my current issue is that even though I have connected my app using react redux, and my store using provider, the dispatch action will be called, without updating the store(I am using redux dev tools to double check, as well as in app testing).

I have attached the code I feel is relevant, however, the entire code base is available as a branch specifically made for this question here. I have spent quite sometime on this(actually an understatement) and any contributions would be greatly appreciated.

Component Relevant Code 

hideBlock(){
const{dispatch} = this.props;
dispatch(hideBlock);
}

return(
  <div className = "works">
    <button id="show-block" type="button" className="show-hide-button" onClick={this.showBlock}>show</button>
    <button id="hide-block" type="button" className="show-hide-button" onClick={this.hideBlock}>Hide</button>
  </div>
);

function mapStateToProps(state) {
  const {environment} = state;
  return{
    environment
  }
}

export default connect(mapStateToProps)(Form);

Action

import * as types from "../constants/ActionTypes";

export function showBlock(show) {
   return {
      type: types.SHOW,
      show: true
   };
}

export function hideBlock(hide) {
   return {
      type: types.HIDE,
      show: false
   };
}

Reducer

import * as types from "../constants/ActionTypes";

const initialState = {
   show: false
};

export default function environment(state = initialState, action) {
   switch(action.type) {
      case types.HIDE:
          return Object.assign({}, state, {
              type: types.HIDE
          });
      case types.SHOW:
          return Object.assign({}, state, {
              type: types.SHOW
          });
      default:
          return state;
    } 
 }

Thank you, and once again any help is very much so appreciated.

Upvotes: 3

Views: 4773

Answers (2)

Charlie-Greenman
Charlie-Greenman

Reputation: 1659

So, I asked a co-worker for help and it turns out that I was returning my action as an object instead of a function. So, for instance, changing the following code:

hideBlock(){
  const{dispatch} = this.props;
  dispatch(hideBlock);
}

to

hideBlock(){
  const{dispatch} = this.props;
  //change hideBlock to hideBlock()
  dispatch(hideBlock());
}

solved the issue. Thanks Andrew!

Upvotes: 6

Kevan Ahlquist
Kevan Ahlquist

Reputation: 5533

It looks like state.show is set in initialState but never modified in any of the cases inside the reducer. The action has show: true, but the reducer never uses this to update the state.

Here's a simplified reducer that updates state.show based on the action's show field:

export default function environment(state = initialState, action) {
   switch(action.type) {
      case types.HIDE:
      case types.SHOW:
          return Object.assign({}, state, {
              show: action.show
          });
      default:
          return state;
    } 
 }

Alternatively, because action.show and action.type have the same data, you could remove show from the actions and rely on the action type:

export default function environment(state = initialState, action) {
   switch(action.type) {
      case types.HIDE:
          return Object.assign({}, state, {
              show: false
          });
      case types.SHOW:
          return Object.assign({}, state, {
              show: true
          });
      default:
          return state;
    } 
 }

Upvotes: -1

Related Questions