Получите снимок состояния редукса без подключения

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

Я не думаю, что вам нужно беспокоиться о повторном рендеринге, если измененные данные не влияют напрямую на компоненты внутри вашего метода рендеринга.Давайте вспомним, что ReactDOM отслеживает только те измененные состояния и обновляет DOM только в зависимости от того, что отличается.Метод рендеринга может быть вызван, но если на самом деле ничего не изменилось, это никак не повлияет на производительность рендеринга .

В конце концов, это то, что реагирует на продажу: реагирующие элементы, которые обновляют изменения, если данныеИзменения разумным образом оптимизируются путем обновления только обновленных элементов с использованием виртуального DOM, который является ReactDOM.

Сначала сравниваются изменения между виртуальным DOM и реальным DOM, прежде чем обновления будут переданы в реальный DOM.Вы можете прочитать, как ReactDOM делает это здесь.

Answer 2

Вы можете сделать хранилище доступным из любого места, например:

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())} />
   )}
 }