Reactjs 在我的Redux设置中未调用Reducer

我正在玩CRA的默认设置，找到了freeCodeCamp的教程，我已经设置好了所有内容，但是没有调用reducer。在它的当前状态下，当我单击图像时，类没有被切换，因为没有调用reducer

startAction.js

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

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

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

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

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

export default configureStore;

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();

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

stopAction.js

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

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

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

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

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

export default configureStore;

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();

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

rotateReducer.js

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

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

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

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

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

export default configureStore;

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();

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

store.js

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

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

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

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

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

export default configureStore;

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();

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

index.js

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

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

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

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

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

export default configureStore;

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();

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

已更新（已解决）

---

正如我从代码中看到的，您可能有一个输入错误<代码>操作不被调用，只需从

切换旋转返回

要修复此问题，只需调用

toggleRotation

方法中的操作即可

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

---

嗯，我想在这里绕过redux…？是的，按照最佳实践，有必要将此逻辑移到

减速器中，并将此操作命名为
开关旋转
或
开关旋转