CODEWITHSUNDEEP
reactjsredux
pingeyeg
pingeyeg

Reputation: 680

Reducer not being called in my Redux setup

I'm playing around with the default setup from CRA and found a tutorial from freeCodeCamp, which I have everything setup, but the reducer isn't being called. In it's current state, when I click the image, the class isn't being toggled because the reducer isn't being called.

startAction.js

export const startAction = {
  type: "rotate",
  payload: true
}

stopAction.js

export const stopAction = {
  type: "rotate",
  payload: false
}

rotateReducer.js

export default function (state, action) {
  switch(action.type) {
    case "rotate":
      return {
        rotating: action.payload
      };
    default:
      return state;
  }
}

store.js

import { createStore } from 'redux';
import rotateReducer from './reducers/rotateReducer';

function configureStore(state = { rotate: true }) {
  return createStore(rotateReducer, state);
}

export default configureStore;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';

import configureStore from './store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={configureStore()}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

app.js

import logo from './logo.svg';
import './App.css';
import { connect } from 'react-redux';
import { startAction } from './actions/startAction';
import { stopAction } from './actions/stopAction';

function App(props) {

  const toggleRotation = () => {
    console.log(props.rotate);
    if (props.rotate) {
      return props.stopAction;
    } else {
      return props.startAction;
    }
  }

  return (
    <div className="App">
      <header className="App-header">
        <button type="button" onClick={toggleRotation}>
          <img src={logo} className={`App-logo ${props.rotate ? "" : "App-logo-paused"}`} alt="logo" />
        </button>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="url"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

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

const mapDispatchToProps = dispatch => ({
  startAction: () => dispatch(startAction),
  stopAction: () => dispatch(stopAction)
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

UPDATED (Solved)

const toggleRotation = () => {
  if (rotating) {
    dispatch({
      type: "rotate",
      payload: false
    });
  } else {
    dispatch({
      type: "rotate",
      payload: true
    });
  }
}

Upvotes: 1

Views: 404

Answers (1)

xom9ikk
xom9ikk

Reputation: 2299

As I can see from the code, you probably have a typo. actions are not called, just return from toggleRotation

To fix, just call the action in your toggleRotation method

const toggleRotation = () => {
  console.log(props.rotate);
  if (props.rotate) {
    return props.stopAction();
  }
  return props.startAction();
};

Upvotes: 1

Related Questions