React-Redux 存储或将 props 中的 api 传递给组件，这是更好的方法

Question

I am just going through a confusion so far. I am developing a React application for that some amount of API call is required. so I just confused with whether calling the API in the component and passing the dats by props to the required components or Using redux thunk to fetch the api's and store in to a React store and fetching the required data by dispatching the action when ever it required.

Suggestions will be appreciable :)

Answer 1

I strongly recommend not to use React-Redux. Here are the reasons

1. Why should you add a library in your application just for passing states
2. Redux comes with code of overhead(writing actions, etc)
3. React's Context API can solve your problem (which is already available in react library)
4. React Composition is another way of passing states to child components.
5. Redux has maintenance overhead as well.

All in all, your React can manage all your state communication problems alone. You don't need another library for state management.

Note: Whenever I say React, I mean React newer versions. React 16.8+

Answer 2

Calling the API is surely gonna be done in the component. Like so:

const Component = () => {
  useEffect(() => {
    const fn = async () => {
      await apiCall()
    }
    fn()
  }, [])
}

But your question resides on where you should store it.

This is simple:

1. If the data you are getting are gonna be used across the whole app, then Redux is a great option. It also comes with data persistence with very little effort using redux-persist ( https://github.com/rt2zz/redux-persist ) so it's not only to have a global object you can access.

Features:

a. Persistance b. Global state accesible anywere c. Enhanced debugging with Redux dev tools

3. If you only want to avoid prop drilling then React.Context is a good option
4. If you are only drilling 2 or 3 leves with your props, just don't overkill it using a Context