javascript - 分派的动作到达动作创建者而不是接收者

Question

我的toolbar组件调度了一个动作abortGame()。我在控制台中看到它到达了动作创建者（文本“ONE！”显示在控制台上）但从未到达减速器（文本“TWO！”从未显示）。

怎么了？

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import App from './App';
import reducer from './store/reducers/reducer';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(
  applyMiddleware(thunk)
));

const app = (
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

ReactDOM.render(app, document.getElementById('root'));

减速器.js

import * as actionTypes from '../actions/actionTypes';

const initialState = {
    score: 0
};

const reducer = (state = initialState, action) => {

    switch (action.type) {

        case actionTypes.ABORT_GAME:
            console.log('TWO');
            return {
                ...state,
                score: 0,
            };

        default:
            return state;
    }
};

export default reducer;

actionTypes.js

export const ABORT_GAME = 'ABORT_GAME';

动作.js

import * as actionTypes from './actionTypes';

export const abortGame = () => {
    console.log('ONE!');
    return {
        type: actionTypes.ABORT_GAME
    };
};

Toolbar.js（组件）

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { abortGame } from '../../store/actions/actions';
    
const toolbar = (props) => (
        <div>
            <div onClick={props.onAbortGame}><Link to="/">MyApp</Link></div>
        </div>
);

const mapDispatchToProps = dispatch => {
    return {
        onAbortGame: () => dispatch(abortGame)
    };
};

export default connect(null, mapDispatchToProps)(toolbar);

标签： javascriptreactjsredux

Answer 1

您在调度操作时错过了函数括号

const mapDispatchToProps = dispatch => {
    return {
        onAbortGame: () => dispatch(abortGame)
    };
};

只需将此行更改onAbortGame: () => dispatch(abortGame)为onAbortGame: () => dispatch(abortGame())

abortGame是一个动作创建者，基本上是一个函数。所以你需要在 dispatch 里面调用函数