reactjs - 如何使用axios获取redux中的api项？

Question

我正在学习 Redux，所以这可能是一个基本的问题和答案，但我们开始吧。

我正在尝试从我的后端 api (/api/items) 获取项目列表，并将它们传递到我的 ShoppingList.js 组件中，以便当组件加载后将显示项目列表。我认为我必须获取操作中的数据，然后在 react 组件中的 useEffect Hook 中调用该操作，但我不太确定，因为我似乎无法让它工作。

谁能帮我解决这个问题吗？

Redux.js

import { createStore } from 'redux';
import axios from 'axios';

const initialState = {
    items: [],
    loading: false,
};

export const store = createStore(
    reducer,
    initialState,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

function reducer(state, action) {
    switch (action.type) {
        case 'GET_ITEMS':
            return {
                ...state,
                items: action.payload,
                loading: false,
            };
        case 'ADD_ITEM':
            return {
                ...state,
                items: [...state.items, action.payload],
            };
        case 'DELETE_ITEM':
            return {
                ...state,
                items: state.items.filter(item => item.id !== action.payload),
            };
        case 'ITEMS_LOADING':
            return {
                ...this.state,
                loading: true,
            };
        default:
            return state;
    }
}

export const getItemsAction = () => ({
    return(dispatch) {
    console.log('here');
    axios.get('api/items').then(response => {
        console.log(response);
        dispatch({ type: 'GET_ITEMS', payload: response.data });
    });
},
});

export const addItemAction = item => ({
    type: 'ADD_ITEM',
    payload: item,
});

export const deleteItemAction = item => ({
    type: 'DELETE_ITEM',
    payload: item,
});

export const setItemsLoading = () => ({
    type: 'ITEMS_LOADING',
});

ShoppingList.js

export default function ShoppingList() {
    const items = useSelector(state => state.items);

    const dispatch = useDispatch();
    const addItem = name => dispatch(addItemAction(name));
    const deleteItem = id => dispatch(deleteItemAction(id));

    useEffect(() => {
        //call get items dispatch?
        getItemsAction();
    });

    return (
        <div className="container mx-auto">
            <button
                onClick={() => {
                    const name = prompt('Enter Item');
                    if (name) {
                        // setItems([...items, { id: uuid(), name: name }]);
                        addItem({
                            id: uuid(),
                            name: name,
                        });
                    }
                }}
                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4"
            >
                Add Item
            </button>

            <ul className="mt-4">
                <TransitionGroup className="shopping-list">
                    {items.map(({ id, name }) => (
                        <CSSTransition
                            key={id}
                            timeout={500}
                            classNames="fade"
                            style={{ marginBottom: '0.5rem' }}
                        >
                            <li>
                                {' '}
                                <button
                                    className="bg-red-500 rounded px-2 mr-2 text-white"
                                    onClick={deleteItem.bind(this, id)}
                                >
                                    &times;
                                </button>
                                {name}
                            </li>
                        </CSSTransition>
                    ))}
                </TransitionGroup>
            </ul>
        </div>
    );
}

Answer 1

你已经接近你需要的地方了，缺少的部分是 redux 是同步的，所以你需要使用像 redux-thunk 或 redux-saga 这样的东西处理异步操作，例如网络请求。

一旦你设置了你想要的任何库，你就可以像你建议的那样从 useEffect 调用 redux 操作来调用它。

例如，如果您使用thunk:

export const getItemsAction = () => ({
    return (dispatch) => {
        axios.get('api/items').then(response => {
            console.log(response)
            dispatch({ type: 'GET_ITEMS_SUCCESS', payload: response.data })
        }).catch(err => dispatch({ type: 'GET_ITEMS_ERROR', error: err })
    },
})

然后你可以从你的效果中调用它:

    useEffect(() => {
        dispatch(getItemsAction())
    }, []);

如果您只想调用一次，请确保添加一个空的依赖项数组，否则每次组件刷新时都会调用它。

请注意，thunk 能够调度其他 redux 操作，我更改了一些操作类型，以使其更清楚发生了什么；GET_ITEMS_SUCCESS 正在设置您的成功响应，GET_ITEMS_ERROR 设置任何错误(如果有)。