react with redux

Create a store

import { createStore, applyMiddleware, compose   } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension'; // 引入 composeWithDevTools 方法
import thunk from 'redux-thunk'; // 引入 redux-thunk

// 初始状态
const initialState = {
    todos: [],
    error: ""
};

// 异步 action
export const fetchTodos = () => {
    return async (dispatch) => {
        try {
            const response = await fetch('https://api.example.com/todos');
            const data = await response.json();
            console.log('fetchTodos', data)
            dispatch({ type: 'FETCH_TODOS_SUCCESS', todos: data });
        } catch (error) {
            dispatch({ type: 'FETCH_TODOS_FAILURE', error: error.message });
        }
    };
};


// Reducer
const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                todos: [...state.todos, { id: Date.now(), text: action.text, done: false }]
            };
        case 'TOGGLE_TODO':
            return {
                todos: state.todos.map(todo =>
                    todo.id === action.id ? { ...todo, done: !todo.done } : todo
                )
            };
        case 'FETCH_TODOS_SUCCESS':
            return {
                todos: [...action.todos]
            }
        case 'FETCH_TODOS_FAILURE':
            return {
                todos: [],
                error: action.error
            }
        default:
            return state;
    }
};

// 使用开发者工具调试和中间件
const enhancers = compose(
    applyMiddleware(thunk),
    composeWithDevTools()
);

// 创建 Redux Store
const store = createStore(enhancers);

export default store;