Где загрузить начальные данные для состояния React + Redux?

Question

[alex4answ]

Получаю начальное состояние из API в компонент-контейнере (smart component):

function App(props){
  useEffect(() => {
    if(!props.isLoaded){
      props.getInitialState();
    }
  });

  return <MyBlock data={props.data} />;
}

const mapStateToProps = store => {
  return { ...store};
};

const mapDispatchToProps = dispatch => {
  return {
    getInitialState: () => dispatch(getInitialState())
  };
};

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

getInitialState - action creator:

function getInitialState() {
  return dispatch => {
    dispatch({
      type: 'GET_INITIAL_DATA'
    });

    fetch('url')
    .then(res => res.json())
    .then(data => {
      dispatch => {
        type: 'GET_INITIAL_DATA_SUCCESS',
        payload: data
      }
    });
    
  };
}

+- в рабочем проекте так, здесь накидал для наглядности

Правильный ли это подход?
Какие есть еще варианты?

Видел как люди пытаются делать запросы прямо в initialState в Редюсере, но мне кажется это не совсем верный и рабочий подход.

Answer 1

[iordania]

Вполне норм подход! Все запросы вы должны отпровлять в Action. Reducer же должен принимать тип экшона и пэйлоад который вы диспатчите в Action. Reducer должен быть чистой функцией

Comments

[alex4answ]

iordania, да, все так и делаю, единственное, не совсем уверен что "получить начальное состояние, а затем передать его в Reducer" - плохая практика.

Подумал может быть есть еще какие-то варианты

Answer 2

[profesor08]

Можно сделать иначе, сначала получаешь данные, потом инициализируешь ими свое хранилище, потом инициализируешь реакт.

Comments

[alex4answ]

profesor08 , какой подход более верный и/или чаще используется ?

[profesor08]

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

[G F]

Если много асинхронности в проекте, посмотри https://redux-saga.js.org/. Мне гораздо больше понравилось, чем thunks.