[英]Print value from props, which is delivered to the component from redux by mapStateToProps
Problem: 问题:
I can't display the value from the state of redux, which is delivered by mapStateToProps
function to the component. 我无法显示redux状态的值,该状态由mapStateToProps
函数传递给组件。
Project structure: 项目结构:
Create-react-app CLi application built the project. Create-react-app CLi应用程序构建了该项目。 Inside of the src/ I have the following code structure 在src /内部,我具有以下代码结构
Necessary code: The main page which we are interacting with looks like this: 必要的代码:我们正在与之交互的主页看起来像这样:
Underneath it is planned to post the result of the clicking on the buttons. 计划在下面发布单击按钮的结果。
So how do I bind the redux state and actions to those two components: Calculator and ResultLine? 那么,如何将redux状态和操作绑定到这两个组件:Calculator和ResultLine?
Let me show the index.js code, where I create the store: 让我展示创建商店的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")
);
There are only three actions: 只有三个动作:
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
}
};
And in the App.js I pass reducers, which are binded to those actions to the Calculator component: 在App.js中,我传递了reducers,并将其与那些动作绑定到Calculator组件:
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);
And that works fine. 那很好。 Whenever I click the button the state changes, and I observe it in the console log, called in mapStateToProps function. 每当我单击按钮时,状态都会改变,并且会在控制台日志中观察到它,该事件在mapStateToProps函数中调用。
So I expect, that I can deliver result prop to the Result line easily, and I pass it into the ResultLine
component as a parameter. 因此,我希望可以轻松地将结果道具传递到Result行,并将其作为参数传递给ResultLine
组件。 So, let's look at that element: 因此,让我们看一下该元素:
import React from 'react';
const ResultLine = ({result}) => {
return (
<p>{result}</p>
);
};
export default ResultLine;
And I can see no changes in a result line. 而且我看不到结果行中有任何更改。 Maybe, something wrong with the React/Redux lifecycle management and ResultLine
component just does not update on changes in state? 也许,React / Redux生命周期管理和ResultLine
组件出了点问题,只是状态变化没有更新?
There's an error on mapStateToProps
. mapStateToProps
发生错误。
Instead of: 代替:
const mapStateToProps = (state) => {
return {
result: state.line
}
}
Please use: 请用:
const mapStateToProps = (state) => {
return {
result: state.calc.line // calc was missing here
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.