@zlodiak

Почему не срабатывает thunk?

Помогите пожалуйста понять почему не срабатывает thunk. В компоненте я вызываю thunk, который должен проинициазилировать store актуальными значениями из БД. В качестве БД временно использую http-server(это имитация бекенда)

App.js:
import { addTodoCreator, initTodosThunk } from './redux/todosReducer';

function App() {
  initTodosThunk();

  return (
        <Header/>
  );
}


Соответствующий thunk хранится в файле редюсера:
todoReducers.js:
const todosReducer = function todosReducer(state = { todos: [] }, action) {
    switch(action.type) {
        case 'ADD_TODO': {
            state = {
                ...state,
                todos: [ ...state.todos, action.payload ],
            };
            break;
        }
        default:
            return state;
    }
    return state;
}

export const addTodoCreator = todo => {
    return { type: 'ADD_TODO', payload: todo }
}


export const initTodosThunk = () => {
    debugger    // ДОХОДИТ
    return async dispatch => {
        debugger   // НЕ ДОХОДИТ
        const response = await fetch(`${API_URL}/todos`);
        const todos = await response.json();
        todos.forEach(todo => {
            dispatch(addTodoCreator(todo));
        });
    }
}


Как видите, в этом thunk есть две инструкции 'debugger'. Проблема в том, что до первого дебуггера поток выполнения скрипта доходит, а до второго - нет. Соответственно thunk не выполняет свою задачу.

Полный код на github
  • Вопрос задан
  • 108 просмотров
Решения вопроса 1
Krasnodar_etc
@Krasnodar_etc
little front
Проблема в том, что вы вызываете функцию стандартным способом. Она возвращает вам вторую функцию (со вторым debugger), которую вы нигде не вызываете. Таким способом и не сможете, так как вам нужно как-то прокинуть в неё dispatch.

Вы должны сделать connect (из react-redux) компонента App, примерно так:
import { connect } from 'react-redux';
// ...
const mapDispatchToProps = {
  callInitTodosThunk: initTodosThunk
}
// ...
function App(props) {
  const { initTodosThunk } = props
  callInitTodosThunk();

  return (
        <Header/>
  );
}

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


Либо использовать хук useDispatch, об этом способе можете погуглить
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы