首次从mapStateToProps获undefined props，求异步Reducer数据获取方案

Let’s break down the most likely issues causing your problem, using the code you shared to guide us:

1. You’re Missing (or Misconfiguring) mapStateToProps #

Looking at your Booking and Map component code, there’s no sign of the mapStateToProps function that connects your Redux store state to component props. This is the #1 reason you’d get undefined props from Redux.

Fix for Your Booking Component: #

Add this to your Booking component file to connect it to the store:

// At the bottom of your Booking component file
import { connect } from 'react-redux';
import { pickup } from '../path/to/actions'; // Adjust path to match your project structure

const mapStateToProps = (state) => {
  // Replace `pickupReducer` with the actual name you used when combining reducers
  return {
    pickupValue: state.pickupReducer.pickup
  };
};

// Connect the component: mapStateToProps maps store state to props, mapDispatchToProps passes actions
export default connect(mapStateToProps, { pickup })(Booking);

Fix for Your Map Component: #

You’ve imported connect and your actions, but you’re not wrapping the component with connect. Add this at the end of your Map component:

const mapStateToProps = (state) => {
  return {
    pickup: state.pickupReducer.pickup // Use your actual reducer name here
  };
};

export default connect(mapStateToProps, actions)(Map);

2. Your Reducer Isn’t Added to the Root Store #

If you haven’t combined your pickup reducer into the root Redux store, your app’s state won’t even have the pickup field. Here’s how to fix that:

Check Your Store Setup (usually in store.js or similar): #

import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import pickupReducer from './path/to/your/reducer'; // Path to your reducer file

// Combine all reducers into one root reducer
const rootReducer = combineReducers({
  pickupReducer: pickupReducer, // This name is what you reference in mapStateToProps
  // Add other reducers here if you have them
});

// Create store with thunk middleware (required for async action creators)
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

3. Double-Check Your Action Type Constant #

A tiny typo in your PICKUP_STATE constant will make your reducer ignore the action entirely. Make sure the constant is identical in both your action creator and reducer:

In ../actions/types.js:

export const PICKUP_STATE = 'PICKUP_STATE';

4. Ensure Redux Thunk is Enabled #

Even though your pickup action creator uses thunk but dispatches a sync action, you still need thunk middleware enabled for any async action logic to work. As shown in step 2, make sure applyMiddleware(thunk) is included when creating your store.

5. Verify Prop Access in Components #

In your Booking component, you call this.props.pickup(false) — make sure pickup is being passed correctly via mapDispatchToProps (the second argument to connect, like we did in step 1).

Quick Debugging Hack #

Add a console.log(state) inside your mapStateToProps function to see the entire Redux state. This will immediately tell you if your reducer’s state exists, and what path you need to use to access the pickup value.

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