Question

在onClick SigninButton次来电ONTOGGLE_MODAL_SIGNIN，从商店更新ui.isSigninModalActive。一切正常但我看到当ui.isSigninModalActive打开和关闭时我的整个应用程序都会被重新渲染。这是正常的行为吗？我原以为你必须store.subscribe并更新该组件的内部状态，并且当存储更新时，该组件会更新（而不是整个应用程序）。如果整个应用重新呈现，那么store.subscribe的重点是什么？或者我在某个地方陷入困境？感谢您的帮助。

signin_button.jsx

import React, { Component } from 'react';
import { store } from '../../../store/store';
import { onToggleModal } from '../../../actions/ui';

export const SigninButton = () => (
  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" className="signin-button"
           onClick={ () => store.dispatch(onToggleModal('signin')) }>
    <path d="M0 0h24.997C25.55 0 26 .444 26 1c0 .552-.45 1-1.003 1H0V0"/>
  </svg>
);

router.js

import React from 'react';
import { render } from 'react-dom';
import { Router, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';
import { store, history } from '../../store/store';
import App from '../../ui/containers/app_container';
import { Welcome } from '../../ui/pages/welcome';

Meteor.startup(() => {
  render(
    <Provider store={ store }>
      <Router history={ history }>
        <Route path="/" component={ App }>
          <IndexRoute component={ Welcome } />
        </Route>
      </Router>
    </Provider>,
  document.getElementById('root'));
});

store.js

import { createStore } from 'redux';
import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory } from 'react-router';
import { rootReducer } from '../reducers/root_reducer';
import { ui } from './ui_store';

const defaultState = { ui };

export const store = createStore(rootReducer, defaultState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export const history = syncHistoryWithStore(browserHistory, store);

ui_store.js

export const ui = {
  isSigninModalActive: false,
};

root_reducer.js

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import { ui } from './ui_reducer';

export const rootReducer = combineReducers({ ui, routing: routerReducer });

ui_reducer.js

import update from 'immutability-helper';
import { toggleBodyOverflow } from '../modules/toggle_body_overflow';

export const ui = (state = null, action) => {
  switch (action.type) {
    case 'ONTOGGLE_MODAL_SIGNIN': {
      toggleBodyOverflow(!state.isSigninModalActive);
      document.getElementById('signin-modal__container').classList.toggle('active');
      return update(state, { isSigninModalActive: { $set: !state.isSigninModalActive } });
    }
    default: return state;
  }
};

ui_action.js

export const onToggleModal = modal => ({ type: `ONTOGGLE_MODAL_${modal.toUpperCase()}` });

编辑：我找到了重新呈现应用的原因

在我的应用容器中，我设置了mapStateToProps并将state.ui作为道具发送给组件。我通过删除它来“修复”它。这是停止重新渲染整个应用程序的正确方法吗？

app_container.js

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as ui from '../../actions/ui';
import { App } from '../layouts/app_layout';

// problem: const mapStateToProps = state => { ui: state.ui };
const mapStateToProps = () => ({});
const mapDispatchToProps = dispatch => bindActionCreators(ui, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(App);

React Redux商店更新重新呈现整个应用程序

0 个答案: