javascript - React 开发工具未显示更新状态

Question

我有一个非常简单的 react 应用程序，它使用 redux 进行状态管理，但是状态没有在 react 开发工具中正确更新，即使状态从容器正确传递到组件也是如此。

应用程序.js

import './App.css';
import TableTopContainer from './components/TableTop/TableTopContainer';
import { Provider } from "react-redux";
import reducer from './reducers';
import { createStore, applyMiddleware } from 'redux'
import thunk from "redux-thunk"
import { composeWithDevTools } from 'redux-devtools-extension';

function App() {
  const store = createStore(
    reducer,
    composeWithDevTools(applyMiddleware(thunk))
  );
  return (
    <div className="App">
      <header className="App-header">
        <Provider store={store}>
          <TableTopContainer />
        </Provider>
      </header>
    </div>
  );
}

export default App;

减速器deck.js

import { suits } from '../common/suits';
import { displayNames } from '../common/displayNames';
import { valueMap } from '../common/valueMap';

/**
 * Actions
 */
export const GENERATE_DECK_COMPLETE = 'deck/GENERATE_DECK_COMPLETE';

/**
 * Initial State
 */
const initialState = {
    deck: [],
    selectedCards: []
};

/**
 * Reducer function
 * @param {*} state 
 * @param {*} action 
 */
export default function reducer(state = initialState, action = {}) {
    const { type, payload } = action;

    switch(type) {
        case GENERATE_DECK_COMPLETE:
            return {
                ...state,
                deck: [...payload, ...state.deck]
            };

        default:
            return state;
    }
}

/**
 * Create a 52 card deck
 */
export const generateDeck = () => (dispatch) => {
    const deck = [];

    for (const suit of suits) {
        for (const displayName of displayNames) {
            deck.push(createCard(suit, displayName));
        }
    }

    const shuffledDeck = deck.sort(() => Math.random() - 0.5);

    dispatch({
        type: GENERATE_DECK_COMPLETE,
        payload: shuffledDeck
    });
}

容器

import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import TableTop from './TableTop';

import {
    generateDeck,
    handleCardSelect,
    handleCardDeselect
} from '../../reducers/deck';

// here the state gets passed to the component correctly to be rendered,
// but it's not showing in the react dev tools
const mapStateToProps = createSelector(
    (state) => state.deck,
    (deck) => ({ ...deck })
);

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

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

在这里您可以看到组件正在渲染的数据，但由于某种原因，反应开发工具显示为空状态

标签： javascriptreactjsreduxreact-redux