反应不从 redux 更新 state

Question

我正在尝试将 redux 添加到我的 React 应用程序中。

我的索引.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, compose, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import dashboardReducer from './store/reducer/dashboard';

const rootReducer = combineReducers({
  dashboard: dashboardReducer
});

const store = createStore(rootReducer);

const app = (
  <Provider store={store}>
      <App />
  </Provider>
)

ReactDOM.render(
  <React.StrictMode>
    {app}
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

然后，我有一个带有 actions 文件夹和 reducer 文件夹的存储文件夹。 在我的操作文件夹中，我有 actionsType.js：

export const TEST = 'TEST';

我还有 dashboard.js：

import * as actionTypes from './actionsTypes';

export const test = () => {
    return {
        type: actionTypes.TEST
    }
};

最后，返回操作的 index.js：

export {
    test
} from './dashboard';

在 reducer 文件夹中，我现在只有一个 reducer，叫做 dashboard.js

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

const initialState = {
    counter: 0
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.TEST:
            return {
                ...state,
                counter: state.counter++
            };
        default:
            return state;
    }
};

export default reducer;

我在我的组件文件夹中创建了一个测试 class Dashboard.js 来测试我的 redux。

import React, { Component } from 'react';
import { connect } from 'react-redux';

import * as action from '../store/actions/index';

class Dashboard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        };
    }

    render() {
        return (
            <div>
              <h2>Main Page: {this.props.ctr}</h2>
              <button onClick={this.props.onTest}>TEST</button>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        ctr: state.counter
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onTest: () => dispatch(action.test())
    };
};

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

当我打开页面时，它只显示“主页：”。 它不应该以 0 值开头吗？ 此外，当我单击“测试”按钮时，没有任何变化。

抱歉，我刚开始使用 React 和 redux，我可能缺少很多配置。

谢谢

Answer 1

您没有从正确的减速器中获得价值。 一种很好的调试方法是在映射中记录 state：

const mapStateToProps = state => {
    console.log(state); // This will run with EVERY state change
    return {
        ctr: state.counter
    };
};

由于您将 reducer 命名为dashboard ，只需在那里调用它：

const mapStateToProps = state => {

    return {
        ctr: state.dashboard.counter
    };
};

Answer 2

试试这个：

前

const mapStateToProps = state => {
    return {
        ctr: state.counter
    };
};

后

const mapStateToProps = state => {
    return {
        ctr: state.dashboard.counter
    };
};