Subscribing to a redux action in a react component

Question

I have an async thunk that fetches some information from a web service, it can dispatch three types of actions

FETCH_REQUESTED
FETCH_SUCCEEDED
FETCH_FAILED

Finally, if it's succeeded; it returns the actual response, or an error object.

I have a component that should detect whether the operation has failed or not, preferably by subscribing to the FETCH_FAILED action and displaying an error message based on the type of the error (404/401 and other status codes)

export const fetchData = () => {
    return async (dispatch, getState) => {
        const appState = getState();

        const { uid } = appState.appReducer;

        await dispatch(fetchRequested());

        try {
            const response = await LookupApiFactory().fetch({ uid });

            dispatch(fetchSucceeded(response));

            return response;
        } catch (error) {
            dispatch(fetchFailed());

            return error;
        }
    }
}

I'm quite new to redux and react, so I'm a bit unsure if I'm heading in the right direction, any help would be appreciated.

Answer 1

To implement a proper redux call back and storage mechanism you should have a store to keep all your data,

const store = createStore(todos, ['Use Redux'])

then, you dispatch data to store,

store.dispatch({
  type: 'FETCH_FAILED',
  text: reposnse.status //Here you should give the failed response from api
});

Then you can get the value from the store in any of your components using a subscribe function. It will be called any time an action is dispatched, and some part of the state tree may potentially have changed.

store.subscribe(()=>{
  store.getState().some.deep.property
})

This is a simple implementation of Redux. As your app grows more complex, you'll want to split your reducing function into separate functions, each managing independent parts of the state using combineReducers. You can get more information from redux.js site