動態兒童注射和Redux綁定

Question

我們正在嘗試將動態兒童注入反應應用程序，該應用程序正在使用React-Redux和Redux，並遇到與兒童道具綁定的問題。我已將問題提煉成以下示例代碼（JSFiddle）。問題是原始的渲染元素更新得很好，但動態注入的部分卻沒有。奇怪的是，更新在redux商店中被拾取，並被正確地輸入到道具中。

const initialState = { 
    renderProperty: "Red Fish", 
    getChildrenProperty: "Blue Fish", 
} 

function MainReducer(state = initialState, action) { 
switch (action.type) { 
     case 'PROBLEM_CHILD_INSIDE_RENDER': 
      return Object.assign({}, state, { 
     renderProperty: action.mutatedProperty 
     }) 
     case 'PROBLEM_CHILD_INSIDE_GET_CHILDREN': 
      return Object.assign({}, state, { 
     getChildrenProperty: action.mutatedProperty 
     }) 
    default: 
     return state 
    } 
} 

const store = Redux.createStore(MainReducer); 

function mapStateToProps(state) { 
    return { 
     renderProperty  : state.renderProperty, 
     getChildrenProperty : state.getChildrenProperty 
    } 
} 
function mapDispatchToProps(dispatch) { 
    return { 
     actions: Redux.bindActionCreators(actionCreators, dispatch) 
    }; 
} 


class ProblemChild extends React.Component { 
constructor() { 
     super(); 
     this.childrenInjected = false; 
     this.state = {children: null}; 
    } 
    /** 
    * Add children in setDynamicChildren() versus within render() 
    */ 
    componentDidMount() { 
     this.setDynamicChildren(); 
    } 
    setDynamicChildren() { 
     this.setState({ 
      children: this.getChildren() 
     }); 
    } 
    getChildren() { 
     var me = this; 
     console.log(this); 
     return (
      <div> 
       <br/> 
       <button style={{marginBottom: '10px'}} 
         onClick={me._handleGetChildrenAction.bind(me)} >UI State Change Action for prop in getChildren()</button> 
       <br/> 
       <span>prop in getChildren(): <b>{me.props.getChildrenProperty}</b></span> 
      </div> 
     ) 
    } 
    render() { 
     var me = this, 
      childrenInjected = me.childrenInjected; 
    console.log(this.props); 
     if(me.state.children && !me.childrenInjected) { 
      return (
       <div > 
        <button style={{marginBottom: '10px'}} 
          onClick={me._handleRenderAction.bind(me)} > UI State Change Action for prop in render()</button> 
        <br/> 
        <span>prop in render(): <b>{me.props.renderProperty}</b></span> 
        <br/> 
        {this.state.children} <br/> 
       </div> 
      ) 
     } 
     else { 
      return (
       <div>placeholder, yo</div> 
      ) 
     } 
    } 
    _handleRenderAction() { 
     var me = this; 
     store.dispatch(actionForPropInsideRender('One Fish!')); 
    } 
    _handleGetChildrenAction() { 
     var me = this; 
     store.dispatch(actionForPropInsideGetChildren('Two Fish!')); 
    } 
} 
ProblemChild = ReactRedux.connect(mapStateToProps,mapDispatchToProps)(ProblemChild); 

function actionForPropInsideRender(mutatedProperty) { 
    return { 
     type: 'PROBLEM_CHILD_INSIDE_RENDER', 
     mutatedProperty 
    } 
} 
function actionForPropInsideGetChildren(mutatedProperty) { 
    return { 
     type: 'PROBLEM_CHILD_INSIDE_GET_CHILDREN', 
     mutatedProperty 
    } 
} 

const actionCreators = {actionCreatorForPropInsideRender, actionCreatorForPropInsideGetChildren}; 

function actionCreatorForPropInsideRender(state, mutatedProperty) { 
    let newState = state.setIn(['uiState', 'renderProperty'], mutatedProperty), 
     nodeValue; 

    nodeValue = newState.getIn(['uiState', 'renderProperty']); 
    return newState; 
} 

function actionCreatorForPropInsideGetChildren(state, mutatedProperty) { 
    let newState = state.setIn(['uiState', 'getChildrenProperty'], mutatedProperty), 
     nodeValue; 

    nodeValue = newState.getIn(['uiState', 'getChildrenProperty']); 
    return newState; 
} 

ReactDOM.render(
    <div> 
     <ReactRedux.Provider store={store}> 
      <ProblemChild /> 
     </ReactRedux.Provider> 
    </div>, 
    document.getElementById('container') 
); 

Answer 1

setDynamicChildren() { 
     this.setState({ 
      children: this.getChildren() 
     }); 
    } 

是否有一個原因，你的混合Redux的國家和地方級的狀態變化？根據我的經驗，這是要求奇怪的行爲。我會換this.setState爲this.props.dispatch(action...)更新REDX存儲狀態。當完整狀態現在處於還原狀態時，您還有問題嗎？否則，在這些情況下，redux dev工具狀態更改的快照將會有所幫助。