javascript - 从 props 打印值，该值通过 mapStateToProps 从 redux 传递到组件

Question

问题:

我无法显示 redux 状态的值，该值是由 mapStateToProps 函数传递给组件的。

项目结构:

Create-react-app CLi 应用程序构建了项目。 在 src/内部我有以下代码结构

必要的代码: 我们正在交互的主页如下所示:

下面计划发布点击按钮的结果。

那么如何将 redux 状态和操作绑定(bind)到这两个组件:Calculator 和 ResultLine？

让我展示一下我在其中创建商店的 index.js 代码:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from './reducers/';

import App from './components/App';

ReactDOM.render(
    <Provider store={createStore(reducers)}>
        <App />
    </Provider>,
    document.getElementById("root")
);

只有三个操作:

import {CALCULATE, ERASE, PUT_SYMBOL} from "./types";

export const putSymbol = (symbol) => {
    return {
        type: PUT_SYMBOL,
        payload: symbol
    }
};

export const calculate = () => {
    return {
        type: CALCULATE
    }
};

export const erase = () => {
    return {
        type: ERASE
    }
};

在 App.js 中，我传递了 reducer ，它们将这些操作绑定(bind)到计算器组件:

import React, {Component} from 'react';
import Calculator from './Calculator';
import ResultLine from "./ResultLine";
import {calculate, erase, putSymbol} from "../actions/index";
import {connect} from "react-redux";

class App extends Component {

  render() {
    return (
      <div>
        <Calculator
          onSymbolClick={this.props.onSymbolClick}
          onEqualsClick={this.props.onEqualsClick}
          onEraseClick={this.props.onEraseClick}/>
        <br/>
        <ResultLine result={this.props.result}/>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  console.log('mapState', state.calc.line);
  return {
    result: state.line
  }
};

const mapDispatchToProps = {
  onSymbolClick: putSymbol,
  onEqualsClick: calculate,
  onEraseClick: erase
};

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

效果很好。每当我单击按钮时，状态就会发生变化，并且我会在控制台日志中观察到它，并在 mapStateToProps 函数中调用。

所以我希望我可以轻松地将 result 属性传递到 Result 行，并将其作为参数传递到 ResultLine 组件中。那么，让我们看看这个元素:

import React from 'react';

const ResultLine = ({result}) => {
  return (
    <p>{result}</p>
  );
};

export default ResultLine;

我在结果行中看不到任何变化。也许，React/Redux 生命周期管理和 ResultLine 组件出了问题，只是没有根据状态变化进行更新？

Answer 1

mapStateToProps 出现错误。

而不是:

const mapStateToProps = (state) => {
  return {
    result: state.line
  }
}

请使用:

const mapStateToProps = (state) => {
  return {
    result: state.calc.line // calc was missing here
  }
}