подключите реагирующее хранилище для экспресс + бэкэнд mysql

Question

Я привыкаю к ​​редуксу с реакцией, и сейчас я прошел несколько уроков.Я запутался в том, как мне получить данные из моего экспресс-API (откуда я получаю данные из БД) в хранилище с избыточностью.

Скажите, что у меня есть файл в моем экспресс-бэкэнде users.js, к которому я подключаюсьМой MySQL базы данных и вернуть всех пользователей в моей базе данных.Так что в моей папке редукторов у меня есть файл index.js, похожий на этот

/reducers/index.js

// would i do a fetch(/users) here to populate users array with data from db?

const initialState = {
  users: []
};

const rootReducer = (state = initialState, action) => {
  switch(action.type) {
    case FETCH_USERS:
    return { ...state, users: [...state.users, action.payload] };
  }
}

, или будет правильным способом получить этот пустой массив и в моем компоненте на componentDidMount (fetch (/ users)...) и установить для state.users мои результаты из этой выборки?

Я не нашел ничего хорошего в лучших практиках для реакции / редукции с express api, поэтому любые ответы, а также ссылки, чтобы устранить мою путаницубудет очень признателен

РЕДАКТИРОВАТЬ ** Если вы читаете это и у вас есть похожая путаница при выполнении API-вызовов с реакцией / избыточностью, я обнаружил, что лучшая практика - это получать вызовы в создателях действий.

Просто импортируйте и назовите своего создателя действия в своем компоненте и передайте ему параметры, которые вы хотели бы.Для этого примера я поместил в файл действий функцию с именем fetchUsers (), где я использую axios для извлечения данных с сервера.

Answer 1

Вы должны fetch пользователей в вашем componentDidMount(), а затем в ответ на обещание вы можете отправить пользователей в свой магазин.

componentDidMount(){

fetch(url).then((response)=>{
  if(response.data){
    this.props.dispatch({
    type:"SET_USERS",
    payload: response.data
    })
  }
})

И вам следует connect() ваш компонент для хранениячтобы получить dispatch() в ваших реквизитах.