Как получить данные через запрос?

Question

[Pogran]

У меня есть серверная часть и клиентская. на серверной части у меня есть роут localhost:3000/entities в котором json данные с базы mongo prntscr.com/c6sf8e . При инициализации приложения, я в reducers хочу подгрузить эти данные, вот так было

const initialState = [
    {
        id: 0,
        text: 'Product',
        active: 0,
        selected: 0
    }
];

const entities = (state = initialState, action) => {

А сейчас хочу в initialState закинуть данные с урла localhost:3000/entities . Как мне это грамотно сделать. Видел что можно вот так axios.get(`${apiPrefix}/entities`) , а дальше не знаю как их забрать и в переменную передать

Answer 1

[Никита Гущин]

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

const store = createStore(history, client, initialState)

store.dispatch(appActions.loadInitialData())

render((
  <Provider store={store}>
    <Router history={finalHistory}>
      {routes}
    </Router>
  </Provider>
), reactRootElement)

А в loadInitialData уже загружайте данные через ajax, например:

function loadInitialData() {
  return dispatch => axios
    .get(`${apiPrefix}/entities`)
    .then(entities => dispatch(saveEntities(entities)))
}

Пример очень общий, но суть, надеюсь, ясна.

PS не забудьте thunk middleware

Answer 2

[Константин Громов]

createStore вторым аргументом принимает стартовое состояние как раз для таких случаев. Код будет выглядеть примерно так:

axios.get(`{apiPrefix}/entities`).then(initState => {
	const store = createStore(reducer, initState);

	// код использующий store
});