动态子注入和 Redux 绑定

Question

我们正在尝试将动态子项注入到使用 React-Redux 和 Redux 的 react 应用程序中，并且遇到了儿童道具上的绑定问题。我已将问题提炼为以下示例代码 （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...)来更新 redux 存储状态。当完整状态现在处于 redux 状态时，您仍然有问题吗？否则，在这些情况下，redux 开发工具状态更改的快照将很有帮助。