功能组件上的 React-Redux + Redux-Thunk。从 API 获取数据后更新 UI

Question

我有一个使用 redux 从 api 获取数据的功能组件。

const useFetching = (someFetchActionCreator) => {
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(someFetchActionCreator());
    }, [])
}

组件：

export function Trips(props) {
    const trips = useSelector(state => state.trips);
    useFetching(fetchTrips)
...
...
}

重击声：

export const fetchTrips = () => (dispatch) =>
    axios.get("/api/v1/trips")
        .then(response => dispatch(addTrips(response.data)))

export const addTrips = trips => ({
    type: ADD_TRIPS,
    payload: trips
})

减速机：

function tripsReducer(state = INITIAL_STATE, action) {
    console.log(action)
    if (action.type === ADD_TRIPS) {
        return Object.assign({}, state, {
            trips: state.trips.concat(action.payload)
        });
    }
    return state
}

我的减速机被称为。发送获取的数据后如何更新 UI？我的渲染不再被调用。

Answer 1

第一个选项：使用钩子

您实际上正在使用Reactandreact-redux钩子。确保trips稍后在组件中使用该对象。这是使用您的代码的示例：

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchTrips } from '../tripsActions';

const useFetching = (someFetchActionCreator) => {
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(someFetchActionCreator());
    }, []);
}

export function Trips(props) {
    const trips = useSelector(state => state.trips);
    useFetching(fetchTrips);

    return (
        <div>
            <p>Total trips: {trips.length}</p>
        </div>
    );
}

第二个选项：使用连接

这是在引入 hooks 之前连接到 Redux 存储状态的方法。

当您使用react-redux时，可以通过使用该函数轻松完成此connect()操作。您还应该提供一个mapStateToProps()函数来从存储中选择组件需要的部分数据，以及一个mapDispatchToProps()可以访问要分派的操作的函数。

使用这种方法您的Trips组件将如下所示：

import React from 'react';
import { connect } from 'react-redux';
import { fetchTrips } from '../tripsActions';

const mapStateToProps = (state) => {
    return {
        // will be available as props.trips
        trips: state.trips
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        // will be available as props.fetch()
        fetch: () => dispatch(fetchTrips)
    }
}

const function Trips(props) {
    this.props.fetch();
    // some other code. Example:
    return (
        <div>
            <p>Total trips: {this.props.trips.length}</p>
        </div>
    );
}

export default connect(mapStateToProps)(Trips);

mapStateToProps()接收 Redux 存储状态并返回一个对象，该对象的字段将在您的组件中用作 props。正如您已经使用的那样，props.trips我只是将该字段映射到 Redux 状态字段的更新值trips。

connect()对组件的调用将为您提供一个连接的组件。应该导出后者而不是原始组件。它不会创建另一个组件，因此您将继续Trips正常使用该组件。

现在，您的组件将随着其 props 的更新而重新渲染。

您可以查看react-redux文档以更好地理解connect()andmapStateToProps()和mapDispatchToProps()函数的使用。