React Redux mapStateToProps 不会在更新时触发

Question

我有一个连接的组件，它维护一个显示“状态”以及几个组件之间通信所需的其他一些东西。我有两个连接的组件，它们是这个总体组件的子组件。根据“状态”组件中的标志，一个或其他子组件将呈现。最好只显示代码：

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 减速器：

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
    });
  });
}

库减速器：

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 时没有调用库组件中的 mapStateToProps。我在 EditorState 和 Library 的 mapStateToProps 中都有断点，在 Library reducer 的 LIBRARY_INITIALIZE 开关中有断点。调试页面加载如下：

EditorState mapStateToProps - state.EditorStateReducer.state 为空

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

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

Library Reducer Initialize - action.templates == [{template1}, {template2}, etc]

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

然后什么都没有。我希望库 mapStateToProps 在此之后也会触发，以便库可以使用模板重新渲染。然而，这并没有发生。为什么这没有发生？我已经准备好把我的头发拉到这个上面了......

Answer 1

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

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