React Redux and Fetch

Question

I have React app with Redux that has following structure:

<ComponentParent>
<ComponentA></ComponentA>
<ComponentB></ComponentB>
</ComponentParent>

In component A an ComponentDidMount, a fetch is called and data is return async-ly. Reducer is then called to add data to the store. Component B then accesses the store to access data added by A to the store.

Predictably Component B accesses the data before Component A had a change to write data to the store (because data is coming from aync fetch).

Question:

what is a proper way to design such interaction?
Do I need use approach similar to react redux with asynchronous fetch ? Note that in Reducer I just store data returned async-ly by Component A, unlike in the link

Thanks

Isaac Khoo · Accepted Answer · 2019-10-22 16:37:35Z

2

Set a default state to your componentB for it to load while awaiting results from your fetch.

In your fetch action, assuming you use redux-thunk:

let fetchData = () => async dispatch => {
 let res = await fetchFromDataSource();
 dispatch({
  type: UPDATE_STATE,
  payload: res
 }) 
};

Your component B should be linked up to the store. Upon dispatch update, it should trigger your componentB to reload via ComponentDidUpdate.

answered Oct 22, 2019 at 16:37

Isaac Khoo

5553 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

leon Over a year ago

thanks. I don't want to use await thought as it will block. I will try Steven's approach, but first I need wrap my brains around thunk

leon Over a year ago

Thunk (without await) was the answer: daveceddia.com/where-fetch-data-redux

Steven Moseley · Accepted Answer · 2019-10-22 16:41:15Z

0

I like the pattern of creating an initial state for the object in the reducer, so that any component accessing it gets that initial state first, and can later update based on a post-fetch state.

xReducer.js

const initState = {
  // Initial state of object
};
export default function xReducer(state=initState, action) {
  switch (action.type) {
    case actionTypes.MY_POST_FETCH_ACTION_TYPE:
      return {
          ...state,
          // state override
      };
      default:
        return state;
  }
}

answered Oct 22, 2019 at 16:41

Steven Moseley

16.4k4 gold badges43 silver badges50 bronze badges

Collectives™ on Stack Overflow

React Redux and Fetch

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related