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

第一種選擇：使用鈎子

您實際上正在使用React和react-redux鈎子。 確保稍后在組件中使用 object 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>
    );
}

第二個選項：使用連接

這是在引入掛鈎之前連接到 Redux 商店 state 的方式。

當您使用react-redux 時，這可以通過使用connect() function 輕松完成。 您還應該提供一個mapStateToProps() function 到 select 您的組件需要的來自存儲的部分數據，以及一個mapDispatchToProps() ZC1C425268E68385D1AB5074C7 操作來調度。

這就是您的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 存儲 state 並返回 object 其字段將在您的組件中用作道具。 由於您已經使用props.trips ，我只是將該字段映射到 Redux 狀態的trips字段的更新值。

使用您的組件調用connect()會為您提供一個連接的組件。 后者應該被導出而不是原始組件。 它不會創建另一個組件，因此您將繼續正常使用Trips組件。

現在您的組件將在更新其道具時重新渲染。

您可以查看 react-redux 文檔以更好地了解connect()和mapStateToProps()以及mapDispatchToProps()函數的使用。

Answer 2

您可以像這樣輕松地做到這一點：

import React, { 
    useCallback, useEffect 
} from 'react';
import { 
    useSelector, useDispatch 
} from 'react-redux';
// ../ducks for example
import { fetchTrips } from '../ducks';

const function Trips(props) {
    const dispatch = useDispatch();

    useEffect(() => {
       fetchTripsHandler();
    }, []);

    const fetchTripsHandler = useCallback(
        () => dispatch(fetchTrips()),
        []
    );     

    const { trips } = useSelector(state => ({
        trips: state.trips
    }));

    // your other component code
}

使用useSelector中的react-redux ，您不能使用connect 、 mapStateToProps和mapDispatchToProps 。 之后，您的組件將連接到 Store。

這是有關react-redux 掛鈎的更多信息。