Question

我有一个正在观看位置的背景传奇，每次更改时都会使用新位置提交动作并更新位置状态。但是，我有一个组件，我只想在用户交互中获取当前state.user.location，但我不想使用mapStateToProps，因为组件保持重新渲染，我只想抓住状态用户请求它并避免不断重新渲染。

我需要应用程序其他部分的后台状态。

reducer:
 export const updateLocation = (state, { location }) => state.merge({ location })

selector:
getLocation : state => state.user.location && state.user.location.coords || null

Component:
class SearchScreen extends PureComponent {
  render(){
    const {location} = this.props
    return(
      <Button onPress={()=>searchWithCurrentLocation(location)} />
   )}
 }

const mapStateToProps = (state) => {
  return {
    location: UserSelectors.getLocation(state),
  }
}

这是我当前的设置，但我不想传递位置并继续重新渲染，因为它不用于显示组件。

Answer 1

您可以从以下任何地方访问商店：

file：storeProvider.js

var store = undefined;

export default {
    init(configureStore){
        store = configureStore();
    },
    getStore(){
        return store;
    }
};

file：App.js

import { createStore } from 'redux';
import rootReducer from './rootReducer';
import storeProvider from './storeProvider';

const configureStore = () => createStore(rootReducer);
storeProvider.init(configureStore);
const store = storeProvider.getStore();

const App = () =>
    <Provider store={store} >
        <Stuff/>
    </Provider>

file：Component.js

import storeProvider from './storeProvider';

class SearchScreen extends PureComponent {
  render(){
    return(
      <Button onPress={()=> searchWithCurrentLocation(UserSelectors.getLocation(storeProvider.getStore().getState())} />
   )}
 }

Answer 2

如果已更改的数据不直接影响render方法中的组件，我认为您不必担心重新渲染。让我们记住，ReactDOM只监视那些已更改的状态，并仅根据不同的内容更新DOM。可以调用渲染方法，但如果没有真正改变，它将不会影响渲染性能。

所有这就是销售的反应：如果数据以智能方式发生变化，通过使用ReactDOM虚拟DOM仅更新更新的元素来优化数据，则更新更改的反应元素。

在将更新提交到真实DOM之前，首先在虚拟DOM和真实DOM之间进行更改。您可以阅读ReactDOM does this here.

的方式

无需连接即可获取redux状态的redux快照

2 个答案: