Question

我有一个连接组件，用于维护显示器状态＆＃34;以及一些组件之间通信所需的一些其他事项。我有两个连接的组件，它们是这个过度组件的子组件。取决于＆＃34;状态内的标志＆＃34;组件一或其他子组件将呈现。最好只显示代码：

EditorState组件：

import React from 'react';
import {connect} from 'react-redux';

import Library from '../library/index';
import Editor from '../editor/index';

import {
  initialize,
  editorState
} from './actions';

class EditorState extends React.Component {
  componentWillMount() {
    const {dispatch} = this.props;
    dispatch(initialize());
  }

  render() {
    const {state} = this.props;
    switch(state) {
      case editorState.Library:
        return <Library />
      case editorState.Editor:
        return <Editor />
      default:
        return null;
    }
  }
}

export default connect(state => {
  return state.EditorStateReducer;
})(EditorState);

EditorState操作：

export const EDITOR_STATE_INITIALIZE = 'EDITOR_STATE_INITIALIZE';

export const editorState = {
  Library: 'library',
  Editor: 'editor'
}

export const initialize = ({
  type: EDITOR_STATE_INITIALIZE,
  state: editorState.Library
});

EditorState Reducer：

import {
  EDITOR_STATE_INITIALIZE
} from './actions';

const init = () => ({
  state: null
});

export default (state = init(), action) => {
  switch(action.type) {
    case EDITOR_STATE_INITIALIZE:
      return {
        ...state, 
        state: action.state
      }
    default:
      return {...state}
  }
}

图书馆组件：

import React from 'react';
import {connect} from 'react-redux';

import {Page} from '../../../components/page/index';

import LibraryItem from '../../../components/library-item/library-item';

import {
  initialize
} from './actions';

class Library extends React.Component {
  componentWillMount() {
    const {dispatch} = this.props;
    dispatch(initialize());
  }

  render() {
    const {templates} = this.props;

    const editorTemplates = templates.map(template => 
      <LibraryItem template={template} />
    );

    return (
      <Page>
        <div className="card-flex library-table">
          {editorTemplates}
        </div>
      </Page>
    )
  }
}

export default connect(state => {
  return state.LibraryReducer;
})(Library);

图书馆行动：

import {
  client,
  serviceUrl
} from '../../../common/client';

export const LIBRARY_INITIALIZE = 'LIBRARY_INITIALIZE';

export const initialize = () => dispatch => {
  client.get(`${serviceUrl}/templates`).then(resp => {
    dispatch({
      type: LIBRARY_INITIALIZE,
      templates: resp.templates
    });
  });
}

Library Reducer：

import {
  LIBRARY_INITIALIZE
} from './actions';

const init = () => ({
  templates: []
});

export default (state = init(), action) => {
  switch(action.type) {
    case LIBRARY_INITIALIZE:
      return {
        ...state,
        templates: action.templates
      }
    default:
      return {...state}
  }
}

我遇到的问题是在发送LIBRARY_INITIALIZE时没有调用Library Component中的mapStateToProps。我在EditorState和Library中的mapStateToProps中都有断点，在Library reducer中的LIBRARY_INITIALIZE开关中有断点。调试页面加载如下：

EditorState mapStateToProps - state.EditorStateReducer.state为null

EditorState mapStateToProps - state.EditorStateReducer.state == editorState.Library

库mapStateToProps - state.LibraryReducer.templates == []

Library Reducer Initialize - action.templates == [{template1}，{template2}等]

EditorState mapStateToProps - state.LibraryReducer.templates == [{template1}，{template2}等]

然后什么都没有。我希望库mapStateToProps在此之后也可以触发，以便库可以使用模板重新渲染。但是，这种情况并没有发生。为什么这不会发生？我准备把头发拉过这个...

Answer 1

您无法100％确定在调度调用之后立即呈现更新后的状态。组件即将重新呈现时调用mapStatetoProps，这取决于React是否批量更新。默认情况下，React批处理事件处理程序的更新。

您可以参考https://github.com/reactjs/react-redux/issues/291

React Redux mapStateToProps在更新时不触发

1 个答案: