반응식은 상태를 전달하지 않습니다.

Question

저는 무엇이 잘못되었는지를 모릅니다.

나는 redux로 구현하는 방법을 알았습니다.

내 문제는 상태가 변경된 후 구성 요소의 상태가 구성 요소로 전파되지 않는다는 것입니다. 저는 새로운 상태 객체를 만들어야한다는 것을 알고 있습니다. 그러나 변화가 없습니다.

그리고 다른 질문은 상태가 객체에있는 이유입니다. "resetLink" 이미지를 참조하십시오. 상태 객체에 저장되지 않는 이유는 무엇입니까?

제발 도와주세요. REDUX에 대한

---

조치 : 소품 및 발송 기능을 가진 마법이 일어나는 곳

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

---

class App extends React.Component { 

    render() { 
     return <VisibleResetLink/> 

    } 
} 

---

입니다 :

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 

소품을로드하지만 변경시 다시 렌더링하지 않는 구성 요소입니다.

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 

---

---

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

Answer 1

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

당신은 어떤 만 실행, 생성자에서 한 번만 SendResetLink 구성 요소에 this.result을 설정할 때 콤포넌트 nent가 인스턴스화 된입니다. 대신

this.result = props.state.result; 

당신의 반응 구성 요소의 인스턴스 속성에 국가의이 부분을 할당, 단순히 이 render() 기능에 직접props 속성을 사용 : 생성자는 응용 프로그램의 상태가 변경 될 때마다 실행되지 않습니다 :

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