React reduxは状態を伝播しない

Question

何が間違っているのか分かりません。

私はreduxで実装する方法を知っていると思った。

私の問題は、状態の変更後にコンポーネントの状態がコンポーネントに伝播していないということです。私は新しい状態オブジェクトを作成しなければならないことを知っています。しかし、変更はありません。

もう1つの質問は、オブジェクトにある理由は、"resetLink"画像を参照してください。なぜそれが状態オブジェクトに格納されていないのですか？

私はそれを働かせるように助けてください。 Reduxのため

---

処置：

import {connect} from 'react-redux'; 
import SendResetLink from '../components/SendResetLink.jsx'; 
import {sendResetLink} from '../actions/index' 
import _ from 'lodash'; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onClick: (email) => { 
      dispatch(sendResetLink(email)) 
     } 
    } 
} 
const mapStateToProps = (state) => { 
    console.log("actual state", state); 
    return _.assign({} , {state: state.resetLink}); 
} 

const VisibleResetLink = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(SendResetLink) 


export default VisibleResetLink 

：

export const sendResetLink = (email) => { 
    return { 
     type: RESET_LINK, 
     email 
    } 
} 

---

class App extends React.Component { 

    render() { 
     return <VisibleResetLink/> 

    } 
} 

---

小道具やディスパッチ機能付きマジックが起こるところです

これは、小道具をロードするが、変更されたときには再レンダリングしないコンポーネントです。

import React, { PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 

class SendResetLink extends React.Component { 

    constructor(props, email, result) { 
     super(props); 

     console.log('props',props); 

     this.onClick = props.onClick; 
     this.result = props.state.result; 
     this.input = props.state.email; 
    } 

    renderResult (result){ 

     console.log("renderResult",result); 
     if(result) 
      return <div className="card-panel deep-orange lighten-4">Invalid username and password.</div> 
    } 

    render() { 
     return <div> 
      {this.renderResult(this.result)} 
      {this.result} 
      <form className="col s12" action="/login" method="post" onSubmit={e => { 
       e.preventDefault() 
       if (!this.input.value.trim()) { 
        return 
       } 
       this.onClick(this.input.value); 
       this.input.value = '' 
      } }> 
       <div className="row"> 
        <div className="input-field col s12"> 
         <i className="material-icons prefix">email</i> 
         <input id="email" type="email" name="email" className="validate" ref = {(node) => this.input = node } /> 
         <label for="email">Email</label> 
        </div> 
       </div> 
       <div className="divider"></div> 
       <div className="row"> 
        <div className="col m12"> 
         <p className="right-align"> 
          <button className="btn btn-large waves-effect waves-light" type="submit" name="action">Send reset key</button> 
         </p> 
        </div> 
       </div> 
      </form></div> 
    } 
} 

SendResetLink.propTypes = { 
    onClick: PropTypes.func.isRequired, 
    state: PropTypes.object.isRequired 
} 
export default SendResetLink 

---

これは減速が実装されている他の関連コードスニペットです。

import _ from 'lodash'; 

const resetLink = (state = {email:"test@test.de", result:true}, action) => { 
    console.log('state', state) 
    switch (action.type) { 
     case 'RESET_LINK': 
       return _.assign({},state,{email: action.email, result: false}); 
     default: 
      return state 
    } 
} 
export default resetLink; 

---

import { combineReducers } from 'redux' 
import resetLink from './ResetLinkReducer.jsx' 

const resetApp = combineReducers({ 
    resetLink 
}) 

export default resetApp 

---

import App from './components/app.jsx'; 

import {Provider} from 'react-redux'; 
import { createStore } from 'redux'; 

import { render } from 'react-dom'; 
import React from 'react'; 
import resetApp from './reducers/index.js'; 


let store = createStore(resetApp,{}); 
console.log(store) 
render(<Provider store={store}> 
    <App /> 
</Provider>, document.getElementById('sendResetLinkComponent')); 

---

console logs. After click the renderResult should change to false. But it stays on true

Answer 1

あなたはコンポのみが実行され、コンストラクタ、一度だけあなたのSendResetLinkコンポーネントにthis.resultを設定nentがインスタンス化されます。コンストラクタは、アプリケーションの状態が変化するたびに実行されません。

this.result = props.state.result; 

の代わりにあなたのインスタンスの属性に状態のこの部分を割り当てるには、コンポーネントを反応させ、単に直接render()機能でをprops属性を使用します。

{this.renderResult(this.props.state.result)}