Реакт-редукс. Как получить обновленное состояние магазина при первом рендеринге приложения

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

Например, в настоящий момент в проекте есть хранилище, которое прослушивает react-router и сохраняет текущее местоположение.

Магазин

export default (initialState = {slidesData}) => {

  const store = createStore(
    makeRootReducer(),
    initialState
  )

  store.asyncReducers = {}
  store.unsubscribeHistory = hashHistory.listen(updateLocation(store));

  if (module.hot) {
    module.hot.accept('./reducers', () => {
      const reducers = require('./reducers').default
      store.dispatch(reducers(store.asyncReducers))
    })
  }

  return store
}

Редуктор местоположения

export const LOCATION_CHANGE = 'LOCATION_CHANGE';

const hash = '/#/',
      browser = '/';

// Action
export function locationChange (location = hash) {
  return {
    type: LOCATION_CHANGE,
    payload: location
  }
}


// Action creator
export const updateLocation = ({ dispatch }) => {
  return (nextLocation) => dispatch(locationChange(nextLocation))
}


// Reducer
const initialState = null;
export default function locationReducer (state = initialState, action) {
  return action.type === LOCATION_CHANGE
    ? action.payload
    : state
}

Таким образом, при первой загрузке приложения компоненты, подписанные на хранилище, получают initialState = null, а когда происходит первое изменение маршрута, обновления хранилища и компоненты теперь получают "/current-route".

Не могли бы вы поделиться своими мыслями о том, что можно сделать, чтобы получить "current-route" до того, как компоненты, которые на него подписаны, получат null.

Или как обрабатывать рендеринг компонентов, если они получают null и инициируют повторный рендеринг, чтобы отобразить обновленный магазин?


webpack reactjs redux react-redux webpack-2
person volna    schedule 03.03.2017    source источник
comment
Я не уверен, что правильно понял ваш вопрос, но у меня отображается Загрузка... до того, как подключенные компоненты получат данные из хранилища.   -  person Ihor Burlachenko    schedule 03.03.2017
comment
@IhorBurlachenko, в этом случае он фактически получает данные из хранилища и равен нулю, поэтому выполняет загрузку и остается там навсегда.   -  person volna    schedule 03.03.2017
comment
Разве вы не можете просто установить для initialState значение, которое вы хотите иметь при запуске приложения?   -  person Ihor Burlachenko    schedule 03.03.2017
comment
@IhorBurlachenko Я могу решить проблему по-другому, просто интересно, есть ли другой вариант   -  person volna    schedule 03.03.2017
comment
Я понимаю. Я сам слежу за темой reactjs на SO, чтобы узнать о других способах React :)   -  person Ihor Burlachenko    schedule 03.03.2017
comment
@IhorBurlachenko хороший подход :)   -  person volna    schedule 03.03.2017

Ответы (1)


arrow_upward
2
arrow_downward

Единственный известный мне способ привести что-то в состояние до того, как будут отправлены какие-либо действия (например, изменение маршрута или что-то в этом роде), — это поместить это в объект состояния по умолчанию для редуктора.

i.e. const reducer = (state = <default state object>, action) => {...

Итак, в вашем случае вместо инициализации с помощью null я бы рекомендовал захватить текущий маршрут из объекта window:

// Reducer
const initialState = window.location.pathname;
person Ian    schedule 03.03.2017