Redux Dispatch Infinite Loop - PullRequest
Новая
       36

Redux Dispatch Infinite Loop

0 голосов
/ 08 февраля 2020

Я использую топор ios .get в моем useeffect, а затем я передаю данные из ответа диспетчеру. Он извлекает данные и отправляет, а затем я получаю состояние, чтобы показать данные консоли, но данные показывают бесконечное l oop. Вот мой useEffect, local state, mapStateToProps и mapDispatchToProps. 

const [users, setUsers] = useState()
useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
      // console.log(response.data)
      __storeUsers(response.data)
    })
    setUsers(showUsers)
    console.log(users)
  }, [__storeUsers, showUsers, users, setUsers])

const mapStateToProps = state => ({
  showUsers: state.getUsers.users
})

const mapDispatchToProps = dispatch => ({
  __storeUsers: (data) => dispatch({type: types.STORE_USERS, payload: data}),
})

Это мой редуктор для пользователей 

import * as types from "./types";
const initialState = {
  users: []
}
const usersState = (state = initialState, action) => {
  switch (action.type) {
    case types.STORE_USERS:
      return {
        ...state,
        users: action.payload
      }
    default:
      return state
  }
}
export default usersState

Это для практических целей. я не использую actionCreators прямо сейчас. После этого я перенесу топор ios вызовом создателя действия. Данные, которые я получаю сверху, находятся в консоли l oop. Пожалуйста, помогите.

Также, если я создаю создателя действия для этого, это также входит в l oop. Создатель действий выглядит следующим образом: 

export const UserActions = () => async (dispatch) => {
  const response = await axios.get('https://jsonplaceholder.typicode.com/users')
  if (response.data) {
    // console.log(response.data)
    dispatch({
      type: types.STORE_USERS,
      payload: response.data
    })
  } else {
    // console.log("no data")
  }
  return response
}

А затем я использую его, как показано ниже 

const mapDispatchToProps = dispatch => ({
  __storeUsers: () => dispatch(UserActions())
})

Оба метода запускают l oop в консоли.

1 Ответ

0 голосов
/ 08 февраля 2020

Обратите внимание, что ваш useEffect здесь, где происходит бесконечное l oop: 

const [users, setUsers] = useState()
useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
      // console.log(response.data)
      __storeUsers(response.data)
    })
    setUsers(showUsers)
    console.log(users)
  }, [__storeUsers, showUsers, users, setUsers])

useEffect было сказано, что users является одной из его зависимостей и что он должен - запустить, когда эта переменная изменится. useEffect затем изменяет значение users с помощью setUsers и видит, что это обновление запускается снова.

Похоже, что для этого console.log вы зависите только от users. Подумайте об исключении из списка зависимостей.

...