Блог

Главная - Вопросы по программированию - Эффект использования не запускается после обновления хранилища

Эффект использования не запускается после обновления хранилища

#javascript #reactjs #react-redux

#javascript #reactjs #реагировать-redux

Вопрос:

Я пытаюсь извлечь данные из Api и сохранить их в хранилище Redux, а затем распечатать их на экране.

Я использую функциональные компоненты.

Затем, когда данные embedToken возвращаются undefined , я думаю, что они должны обновляться при обновлении хранилища

App.js

 import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { connect } from 'react-redux'
import { requestEmbedToken } from './redux/actions'

function App(props) {
  const [embedToken, setEmbedToken] = useState(props.token);
  useEffect(() => {
    if (props.token === undefined) {
      props.requestToken();
      console.log(props.token)

      setEmbedToken(props.token)
    }
  }, [props]);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
          Here's the token {JSON.stringify(embedToken)}
      </header>
    </div>
  );

}
const mapStateToProps = (state) => ({
  token: state.embedToken,
})

const mapDispatchToProps = (dispatch) => {
  return ({
    requestToken: () => dispatch(requestEmbedToken())
  })
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

Действия

 import axios from 'axios';
export const saveEmbedToken = token => ({
    type: 'SAVE_EMBED_TOKEN',
    payload: {
        token
    }
})
export const requestEmbedToken = () => (dispatch) => {

    return axios.get('http://localhost:7071/api/getpbiTokens')
        .then(response => {
            console.log("token embed", response)
            dispatch(saveEmbedToken(response.data.token))
        })
}

Редукторы

 import { combineReducers } from 'redux'

function reportingActions(state = {}, action) {
    switch (action.type) {
        case 'SAVE_EMBED_TOKEN':
            return {
                ...state,

                embedToken: action.payload.token

            }
        default: // need this for default case
            return state

    }
}
const reportingReducers = combineReducers({
    reportingActions
})
export default reportingReducers

Комментарии:

1. Я думаю, что это что-то связанное с действием отправки перед асинхронным возвратом requestEmbedToken, как указано здесь

2. Переместитесь setEmbedToken за пределы условия и обновите зависимость props.token , чтобы она устанавливалась при каждом обновлении токена. В настоящее время вы устанавливаете для него значение undefined только в том случае, если токен не определен, поскольку код является синхронным. Может быть, вы хотите сделать запрос токена асинхронным и ожидать его в обратном вызове эффекта? См. раздел Использование асинхронных функций в ловушке эффекта.

3. Попробуйте использовать useEffect(() => { … }, [ реквизит.жетон]);

4. @lissettdm пытался, но не работает (мой api правильно отправляет данные обратно)

5. Вы проверили, вызывается ли это действие SAVE_EMBED_TOKEN и обновляется ли состояние?

Ответ №1:

Фактический путь к токену state.reportingActions.embedToken не state.embedToken

Исправьте это

 const mapStateToProps = (state) => ({
  token: state.embedToken,
})

Комментарии:

1. Вот и все, но почему это state.reportingActions.embedToken так, а не state.embedToken так? в редукторе я установил только embeddtoken

2. потому combineReducers({ reportingActions }) что возвращает состояние redux и reportingActions является его свойством

3. Хорошо, я привык к хранилищу Angular NGRX, и оно не добавляет имя редуктора в качестве свойства состояния, если вы не добавите его в объект возврата редуктора