javascript - 功能组件上的 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
})

reducer :

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
}

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

Answer 1

第一个选项:使用 Hook

您实际上正在使用 React和 react-redux钩子(Hook)。确保使用对象 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>
    );
}

第二个选项:使用连接

这是在引入钩子(Hook)之前连接到 Redux 存储状态的方式。

当您使用 react 还原 这可以通过使用 connect() 轻松完成。功能。您还应该提供 mapStateToProps()用于从存储中选择组件需要的部分数据和 mapDispatchToProps() 的函数函数可以访问要分派(dispatch)的操作。

这就是您的 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 field 。

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

现在您的组件将在更新其 Prop 时重新渲染。

您可以查看 react-redux 文档以更好地了解 connect() 的使用。和 mapStateToProps() 和 mapDispatchToProps() 功能。