reduxとreact.jsを使用すると、私の小道具が「未定義」になるのはなぜですか？

Question

いくつかのイベントが成功したときにブール値を保存した状態をアプリケーションに追加しようとしました。私はここで間違っていることを理解できません。

リデューサー：

import * as actionTypes from '../constants/action-types.js'; 

const initialState = [{ 
    eventPassed: false 
}]; 

export default function eventPassed(state = initialState, action) { 
    switch (action.type) { 
    case actionTypes.EVENT_PASSED: 
     return true; 
    default: 
     return state; 
    } 
} 

処置：コンポーネントの周囲

import * as actionTypes from '../constants/action-types'; 

export function eventPassed(eventPassed) { 
    return { 
    type: actionTypes.EVENT_PASSED, 
    payload: { eventPassed: eventPassed } 
    }; 
} 

コンテナ：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import Example from '../components/example.jsx'; 
import { eventPassed } from '../actions/app-actions'; 

class ExampleContainer extends Component { 
    render() { 
    return (
     <Example {...this.props} /> 
    ); 
    } 
} 

const mapDispatchToProps = (dispatch) => ({ 
    actions: bindActionCreators({ 
    eventPassed 
    }, dispatch) 
}); 

const mapStateToProps = (state) => ({ 
    eventPassed: state.eventPassed 
}); 

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

コンポーネント：

import React, { Component, PropTypes } from 'react'; 

class Example extends Component { 

    constructor() { 
    super(); 
    this.action = this.action.bind(this); 
    } 

    componentDidMount() { 
    this.props.actions.eventPassed(true); 
    } 

    action() { 
    console.log(this.props.eventPassed); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.action}>Action</button> 
     </div> 
    ); 
    } 
} 

export default Example; 

私はを記録しようと、それは私に "未定義" を与える<Example />コンポーネントでを "this.props.eventPassed"。何か不足していますか？これは、控除した店舗の最も簡単な使用方法です。

Answer 1

はなぜthis.props.eventPassedは、あなたがこの時点でアクセスしようとしているアクション機能（eventPassed）はthis.props.actions.eventPassedに存在していない？：「未定義」として

が記録されます。それは単にthis.props.actions上に存在する実際 。

これは、actionメソッドをmapDispatchToPropsの値 'actions' にバインドしたためです。これは、提供されたターンthis.props.actions経由 eventPassedアクションへのアクセスを提供します。あなたは、アクションeventPassedに「eventPassed」のプロパティ にアクセスしようとしている this.props.actions.eventPassedにアクセスしようとしていることでeventPassedにthis.props.actionsポイント以来

、。値に

arrow functionとを返すように

mapDispatchToPropsニーズ：結果は、このプロパティにログインしたとき あなたは "未定義"

---

その他の必要な修正を受けるということですブロック体は自動的に値を返さないであるため、定義する必要があります。だからあなたの関数は、のように見える必要があります：

mapDispatchToProps = (dispatch) => { 
    return { actions: bindActionCreators(eventPassed, dispatch) } 
} 

---

初期状態は、オブジェクトを含む配列です：あなたは後でobject { eventPassed: true}としてではなく、それを参照するようにしようとしているので

const initialState = [{ 
    eventPassed: false 
}]; 

オブジェクトの配列[ { eventPassed: true } ]それはそうでなければなりません：

const initialState = { 
    eventPassed: false 
}; 

もはやオブジェクト（またはしていた状態を返していましたあなたが最初にやった

export default function eventPassed(state = initialState, action) { 
    switch (action.type) { 
    case actionTypes.EVENT_PASSED: 
     return { 
     ...state, 
     eventPassed: action.payload 
     }; 
    default: 
     return state; 
    } 
} 

：減速が更新され、正しい（しかし未変異）状態をバック渡す必要

---

元のケースオブジェクトの配列）でも、値true

Answer 2

reducerオブジェクトの配列で状態を初期化すると、オブジェクトはeventPassedになりますそれは初期状態を交換するので、それは正しくないですので、initStateはブール値を保持するだけのオブジェクト可能性があり、そしてあなたがアクションで送信され​​に基づいて状態を返す必要があり、次のようにすることdispathed：

import * as actionTypes from '../constants/action-types.js'; 

const initialState = { 
    eventPassed: false 
}; 

export default function eventPassed(state = initialState, action) { 
    switch (action.type) { 
    case actionTypes.EVENT_PASSED: 
     return { 
     ...state, 
     eventPassed: action.payload 
     }; 
    default: 
     return state; 
    } 
} 

また、あなたのcomponentであなたは変更する必要があります。

this.props.eventPassed