redux - 动态子注入(inject)和 Redux 绑定(bind)

Question

我们正在尝试将动态子级注入(inject)到使用 React-Redux 和 Redux 的 React 应用程序中，但在绑定(bind)子级 Prop 时遇到了问题。我已将问题提炼为以下示例代码 ( JSFiddle )。问题是原始呈现的元素更新得很好，但动态注入(inject)的部分却没有。奇怪的是，更新是在 redux store 中获取的，并正确地提供给 Prop 。

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...) 以更新 redux 存储状态。当 complete state 现在在 redux 中时，你还有问题吗？否则，redux 开发工具状态更改的快照在这些情况下会有所帮助。