状態が変更されたときにコンポーネントを再レンダリングできません。

Question

私は反応するのが新しいです。 JSONが有効であるかどうかを確認し、それをscreeに表示したいと思います。ここでは、アクションValidConfigurationが発射され、減速が新しい状態を返しているが、スマートコンポーネントの追加・設定・コンテナが再レンダリングされていません

が私のファイルです： アクション

import { 
    VALID_CONFIGURATION, 
    INVALID_CONFIGURATION, 
    SAVE_CONFIGURATION, 
    START_FETCHING_CONFIGS, 
    FINISH_FETCHING_CONFIGS, 
    EDIT_CONFIGURAION 
} from '../constants'; 

function validateConfiguration(jsonString) { 
    try { 
     JSON.parse(jsonString); 
    } catch (e) { 
     return false; 
    } 
    return true; 
} 

export function isConfigurationValid(state) { 
    if (validateConfiguration(state.jsonText)) { 
     return({type: VALID_CONFIGURATION, state : state}); 
    } else { 
     return({type: INVALID_CONFIGURATION, state : state}); 
    } 
} 

export function fetchConfiguration() { 
    return ({type : START_FETCHING_CONFIGS}); 
} 

export function finishConfiguration(configs) { 
    return ({type : FINISH_FETCHING_CONFIGS, configs: configs}); 
} 

export function editConfiguration(index) { 
    return ({type : EDIT_CONFIGURATION, index : index}); 
} 

export function saveConfiguration(config) { 
    return ({type: SAVE_CONFIGURATION, config : config}); 
} 

コンテナコンポーネント

import React, {Component} from 'react'; 
import {Button, Input, Snackbar} from 'react-toolbox'; 
import {isConfigurationValid, saveConfiguration} from '../../actions/config'; 
import { connect } from 'react-redux'; 
import style from '../../theme/layout.scss'; 

class AddConfigContainer extends Component { 

    constructor(props) { 
     super(props); 
     this.state = {jsonText: '', key: '', valid: false, showBar : true}; 
    } 

    handleChange(text, value) { 
     this.setState({[text]: value}); 
    } 

    handleSnackbarClick() { 
     this.setState({ showBar: false}); 
    }; 

    handleSnackbarTimeout() { 
     this.setState({ showBar: false}); 
    }; 

    render() { 
     let {onValid} = this.props; 
     return (
      <div> 
       <h4>Add Configs</h4> 
       <span>Add configs in text box and save</span> 

       <Input type='text' label='Enter Key' 
         value={this.state.key} onChange={this.handleChange.bind(this, 'key')} required/> 

       <Input type='text' multiline label='Enter JSON configuration' 
         value={this.state.jsonText} onChange={this.handleChange.bind(this, 'jsonText')} required/> 

       <div>IsJSONValid = {this.state.valid ? 'true': 'false'}</div> 

       <Snackbar action='Dismiss' 
          label='JSON is invalid' 
          icon='flag' 
          timeout={2000} 
          active={ this.state.showBar } 
          onClick={this.handleSnackbarClick.bind(this)} 
          onTimeout={this.handleSnackbarTimeout.bind(this)} 
          type='accept' 
          class = {style.loader} 
       /> 

       <Button type="button" label = "Save Configuration" icon="add" onClick={() => {onValid(this.state)}} 
         accent 
         raised/> 
      </div> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 
    let { 
     jsonText, 
     key, 
     valid 
    } = state; 

    return { 
     jsonText, 
     key, 
     valid 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onValid : (value) => dispatch(isConfigurationValid(value)), 
     saveConfiguration: (config) => dispatch(saveConfiguration(config)) 
    } 
}; 

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

リデューサー

import assign from 'object.assign'; 
import {VALID_CONFIGURATION, INVALID_CONFIGURATION} from '../constants'; 

const initialState = { 
    jsonText : '', 
    key : '', 
    valid : false, 
    showBar: false, 
    configs: [json], 
    activeConfig : {}, 
    isFetching: false 
}; 

export default function reducer(state = initialState, action) { 
    if (action.type === VALID_CONFIGURATION) { 
     return (assign({}, state, action.state, {valid: true})); 
    } else if (action.type === INVALID_CONFIGURATION) { 
     return assign({}, state, action.state, {valid: false}); 
    } else { 
     return state; 
    } 
} 

Answer 1

あなたのコンポーネントは再レンダリングされると思いますが、実際には小道具からのvalidという値を使用することはありません。 this.props.valid）。 this.state.validのみを使用しますが、コードのどこでも変更されません。 Reduxはコンポーネントの内部状態を変更することはできません（また変更できない）ことに注意してください。新しいコンポーネントをコンポーネントに渡すだけなので、変更を確認するにはthis.props.validを使用する必要があります。基本的には、validがコンポーネントの状態に存在する必要があるかどうかを検討する必要があります。私はあなたがそうしているとは思わない、この場合、州にあるすべてのデータ（おそらくshowBarを除く）はそこにいる必要はなく、あなたは小道具からそれを取ることができる。

何らかの理由で状態を維持する必要がある場合は、 componentWillReceiveProps新しいコンポーネントを反映するようにコンポーネントの状態を更新します。