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

Question

[zlodiak]

Помогите пожалуйста понять почему не срабатывает 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

Answer 1

[Егор Живагин]

Проблема в том, что вы вызываете функцию стандартным способом. Она возвращает вам вторую функцию (со вторым 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, об этом способе можете погуглить

Comments

[zlodiak]

Но вы предлагаете сделать то же самое, что и у меня. То есть вызвать ту же самую функцию, но прокинув её через mapDispatchToProps.

[twolegs]

zlodiak, Чтобы thunk сработал, он должен быть передан параметром в `dispatch`: `dispatch(initTodosThunk())`. mapDispatchToProps делает это под капотом за вас.