Redux Thunk异步Action实现及组件调用方式技术咨询

Hey there! Let's walk through how to make the most of your Redux Thunk action, along with proper usage of mapDispatchToProps and bindActionCreators. I'll cover key fixes, implementation details, and best practices below:

1. Fix Your Thunk Action (Add Dispatch Logic) #

Your current fetchPosts function is a valid Thunk, but it doesn't actually update your Redux store—since it never dispatches any actions. The whole point of Thunks is to handle async work, then dispatch actions to modify state once the async operation completes. Here's a corrected version with proper action dispatching:

import { Dispatch } from 'redux';
// Import your action types and action type union
import { TActions, FETCH_POSTS_REQUEST, FETCH_POSTS_SUCCESS, FETCH_POSTS_FAILURE } from './action-types';

export const fetchPosts = (id: string) => (dispatch: Dispatch<TActions>) => {
  // Dispatch a "request started" action to show loading state
  dispatch({ type: FETCH_POSTS_REQUEST });

  return fetch(`http://example.com/posts/${id}`) // Include the `id` parameter in your request URL
    .then(response => {
      // Check if the network response is valid
      if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
      return response.json();
    })
    .then(json => {
      // Dispatch success action with fetched data
      dispatch({ type: FETCH_POSTS_SUCCESS, payload: json });
      return "Success message";
    })
    .catch(err => {
      // Dispatch failure action with error details
      dispatch({ 
        type: FETCH_POSTS_FAILURE, 
        payload: err instanceof Error ? err.message : 'Unknown fetch error' 
      });
      throw err; // Re-throw to let components handle errors
    });
};

2. Using mapDispatchToProps with bindActionCreators #

When connecting your component to Redux, bindActionCreators simplifies wrapping your Thunk actions with dispatch so you can call them directly from props. Here's how to set it up:

Class Component Example #

import { bindActionCreators, Dispatch } from 'redux';
import { connect } from 'react-redux';
import { fetchPosts } from './actions';
import YourComponent from './YourComponent';

// Map dispatch to component props
const mapDispatchToProps = (dispatch: Dispatch) => {
  return bindActionCreators({ fetchPosts }, dispatch);
};

// Connect component (null means we don't need mapStateToProps here)
export default connect(null, mapDispatchToProps)(YourComponent);

Functional Component Example (with Hooks) #

If you're using functional components, you can skip connect entirely and use useDispatch from react-redux:

import { useDispatch } from 'react-redux';
import { fetchPosts } from './actions';

const YourComponent = () => {
  const dispatch = useDispatch();
  
  const handleFetch = () => {
    dispatch(fetchPosts('your-post-id'));
  };

  return <button onClick={handleFetch}>Load Posts</button>;
};

Alternative to bindActionCreators #

You don't need bindActionCreators—you can manually wrap actions with dispatch for a more explicit approach:

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    fetchPosts: (id: string) => dispatch(fetchPosts(id))
  };
};

This works exactly the same as using bindActionCreators, and is often preferred for smaller numbers of actions.

3. Handling Async Results in Components #

Since your Thunk returns a promise, you can use async/await to handle success and error states directly in your component:

const YourComponent = ({ fetchPosts }) => {
  const handleFetchPosts = async (postId: string) => {
    try {
      const successMessage = await fetchPosts(postId);
      console.log(successMessage); // "Success message"
      // Do something on success (e.g., show a toast)
    } catch (err) {
      console.error('Fetch failed:', err);
      // Handle error (e.g., display an error message to the user)
    }
  };

  return (
    <div>
      <button onClick={() => handleFetchPosts('123')}>Fetch Post #123</button>
    </div>
  );
};

4. TypeScript Best Practices #

To keep your TypeScript types safe:

• Define your action types explicitly:

  export const FETCH_POSTS_REQUEST = 'FETCH_POSTS_REQUEST';
  export const FETCH_POSTS_SUCCESS = 'FETCH_POSTS_SUCCESS';
  export const FETCH_POSTS_FAILURE = 'FETCH_POSTS_FAILURE';
  
  type FetchPostsRequestAction = { type: typeof FETCH_POSTS_REQUEST };
  type FetchPostsSuccessAction = { type: typeof FETCH_POSTS_SUCCESS; payload: Post[] }; // Replace Post with your data type
  type FetchPostsFailureAction = { type: typeof FETCH_POSTS_FAILURE; payload: string };
  
  export type TActions = 
    | FetchPostsRequestAction 
    | FetchPostsSuccessAction 
    | FetchPostsFailureAction;
  

• Ensure your Redux store's state type matches the data you're fetching, so you can safely access it in components.

5. Quick Optimizations #

• Avoid hardcoded URLs: Use environment variables (e.g., process.env.REACT_APP_API_URL) to keep your API endpoints configurable.
• Add loading states: The FETCH_POSTS_REQUEST action lets your reducer set a isLoading flag, so you can show spinners or disable buttons during the fetch.
• Use async/await for readability: Replace nested .then() chains with async/await to make your Thunk code cleaner:

  export const fetchPosts = (id: string) => async (dispatch: Dispatch<TActions>) => {
    dispatch({ type: FETCH_POSTS_REQUEST });
    try {
      const response = await fetch(`http://example.com/posts/${id}`);
      if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
      const json = await response.json();
      dispatch({ type: FETCH_POSTS_SUCCESS, payload: json });
      return "Success message";
    } catch (err) {
      dispatch({ 
        type: FETCH_POSTS_FAILURE, 
        payload: err instanceof Error ? err.message : 'Unknown error' 
      });
      throw err;
    }
  };
  

内容的提问来源于stack exchange，提问作者Adrian Florescu