@jfswift
Junior front-end dev.

Redux-thunks, почему не работает санка?

Добрый день. Уже давно решался переходить с классовых компонентов на функциональщину, и вот, время пришло. Плюсом решил юзать Redux toolkit (ну а что, переходить так с огоньком), теперь возникает много вопросов.

Один из них: по какой-то неясной магической причине напрочь не работают санки.
Вот мой стор:
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { todoReducer } from './todo-reducer';

export const store = configureStore({
    reducer: {
        todoReducer
    },
    middleware: getDefaultMiddleware(),
    devTools: process.env.NODE_ENV !== 'production',
});


Вот мой редюсер:
import { createAction, createReducer } from "@reduxjs/toolkit"
import { todoAPI } from './api'

const addTodo = createAction('ADD_TODO')
const newTodoText = createAction('NEW_TODO_TEXT')
const toggleFetching = createAction('TOGGLE_FETCHING')
const setTasks = createAction('SET_TASKS')

let initialState = {
    taskCount: 1,
    newTodoText: '',
    isFetching: false,
    tasks: [],
};

export const todoReducer = createReducer(initialState, {

    [addTodo]: (state) => {
        state.taskCount++
    },
    
    [newTodoText]: (state, action) => {
        state.newTodoText = action.payload
    },

    [toggleFetching]: (state) => {
        state.isFetching = !state.isFetching
    },

    [setTasks]: (state, action) => {
        state.tasks = action.payload
    }

});
// thunk

export const getTodos = () => dispatch => {
   
    dispatch(toggleFetching())
    todoAPI.getTasks()
        .then(response => {
            dispatch(setTasks(response))
            dispatch(toggleFetching())
        })
}


Ну, и собственно компонент:

import React from 'react'
import { useEffect } from 'react'
import { getTodos } from '../redux/todo-reducer'

export const Todo = (props) => {

    useEffect(() => {
        
        getTodos()

    })

    return (
        <div>
            Todo page
        </div>
    )
}


Что я делаю не так, почему не работает санки? Просто не делается запрос. Ставил консоль лог в санку, даже он не вызывается. Просто ничего не происходит, в остальном приложение работает.
  • Вопрос задан
  • 81 просмотр
Решения вопроса 1
@disappearedstar
Фронтенд-разработчик в ivi.ru
Вызов getTodos() в эффекте нужно обернуть в dispatch.

import React from 'react'
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { getTodos } from '../redux/todo-reducer'

export const Todo = (props) => {
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch(getTodos())
    })

    ...
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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