プリント値、

Question

問題：成分にmapStateToProps機能により送達されるReduxの状態から値を表示できない

。

プロジェクト構造：

作成反応するアプリCLIアプリケーションは、プロジェクトを構築しました。その下に

： 私たちはこのようになりますと対話しているメインページ：/私はコードの構造

必要なコード次き、srcの内部 ボタンをクリックした結果を投稿する予定です。

どのようにしてreduxの状態とアクションを2つのコンポーネント、つまり電卓とResultLineにバインドしますか？

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中：

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") 
); 

が唯一の3つのアクションがあります。

私は店を作成する場所を私はindex.jsにコードを、お見せしましょうこれらのアクションは、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); 

それはうまく動作します。ボタンをクリックするたびに状態が変わり、mapStateToProps関数で呼び出されたコンソールログに表示されます。

私はResultの結果をpropelに簡単に渡すことができ、それをパラメータとして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 
    } 
}