React-Redux + Redux-Thunk on functional component. Update UI after data is fetched from API

user_2200675 0
Viewed 3297

I have a functional component that fetches data from an api using redux.

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

The component:

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

The thunk:

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

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

The 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
}

My reducer is called. How can I update the UI after the fetched data have been dispatched? My render is not called again.

react-redux redux reactjs javascript
2 Answers

1st option: Using hooks

You are actually using React and react-redux hooks. Make sure you use the object trips later in your component. Here is a sample using your code:

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>
    );
}

2nd option: Using connect

This was the way to connect to the Redux store state before they introduced the hooks.

As you are using react-redux this can be easily done by using the connect() function. You should also provide a mapStateToProps() function to select the part of the data from the store that your component needs and a mapDispatchToProps() function to have access to the actions to be dispatched.

This is how your Trips component would look like with this approach:

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() receives the Redux store state and returns an object whose fields will be available as props in your component. As you already use props.trips I simply mapped that field to the updated value of the Redux state's trips field.

The call to connect() with your component gives you a connected component. And that latter should be exported rather than the original component. It will not create another component so you will continue to use the Trips component normally.

Now your component will be re-rendered as its props are being updated.

You can have a look at the react-redux documentation to better understand the use of connect() and mapStateToProps() and mapDispatchToProps() functions.

user_82366470

You can do it easily like that:

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
}

With useSelector from react-redux you can not use connect, mapStateToProps and mapDispatchToProps. After that, your component will be connected to the Store.

Here is more information about react-redux hooks.

user_127073980
Related