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 ponents, 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.

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 ponents, 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.

• javascript
• reactjs
• redux
• reducers
• react-redux

Share Follow edited Mar 17, 2016 at 3:41 Charlie-Greenman asked Mar 15, 2016 at 5:53 Charlie-GreenmanCharlie-Greenman 1,67922 gold badges2121 silver badges3939 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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!

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;
    } 
 }