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

Question

[jj swift]

Добрый день. Уже давно решался переходить с классовых компонентов на функциональщину, и вот, время пришло. Плюсом решил юзать 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>
    )
}

Что я делаю не так, почему не работает санки? Просто не делается запрос. Ставил консоль лог в санку, даже он не вызывается. Просто ничего не происходит, в остальном приложение работает.

Answer 1

[Дмитрий]

Вызов 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())
    })

    ...
}

Comments

[jj swift]

Огромное спасибо, такая глупая ошибка, а все по невнимательности, в классовых компонентах такое не нужно было делать.

[jj swift]

Если можете, ответьте пожалуйста на еще один вопрос, каким образом мне передавать данные из стейта в компоненты? Раньше я делал это путем создания контейнерных компонентов, через mapStateToProps и mapDispatchToProps, далее оборачивал компонент с помощью функции коннект. Теперь я хочу избавиться от оберток, так как мне быть?

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App/>
        </Provider>
</React.StrictMode>, document.getElementById('root'));

Вот такой у меня индекс, сюда я передаю стор через провайдер.
Конечно, понятно, что компонент должен получать все данные по пропсам, иначе это уже будет не презентационный компонент. Но раз уж я перешел на хуки, я пока не очень понимаю, по сути своей здесь уже в функциональном презентационном компоненте делается вызов санки.

[HealSpirit]

jj swift,

Если можете, ответьте пожалуйста на еще один вопрос, каким образом мне передавать данные из стейта в компоненты? Раньше я делал это путем создания контейнерных компонентов, через mapStateToProps и mapDispatchToProps, далее оборачивал компонент с помощью функции коннект. Теперь я хочу избавиться от оберток, так как мне быть?

useSelector
docs

[jj swift]

HealSpirit, да, уже разобрался сам, но спасибо