Redux问题：传递给展示组件的number prop为何为undefined？

你的 number prop 始终为 undefined，主要是三个核心问题导致的：Redux store 创建顺序错误、状态结构不匹配，以及可能缺失的 Provider 包裹。下面逐个拆解并修正：

1. createStore 参数顺序完全错误 #

Redux 的 createStore 函数参数顺序是严格规定的：reducer → 初始状态（可选）→ 增强器（可选）。你把初始状态放在了第一个位置，导致 Redux 无法正确加载你的 rootReducer 和初始状态，这是最根本的问题。

修正后的 store 代码： #

import { createStore, applyMiddleware, compose } from 'redux'; 
import rootReducer from './reducers/rootReducer'; 

const initialState = { 
  multiply: { // 结构要和 combineReducers 的 key 对应
    multiply: 2, 
    number: 1 
  } 
}; 

// 用 compose 合并多个增强器（中间件 + devTools）
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const store = createStore(
  rootReducer,
  initialState, // 初始状态放在第二个位置
  composeEnhancers(applyMiddleware(logger(), thunk))
);

注意：初始状态的结构要和 combineReducers 对应——因为你把 multiplyReducer 挂载到了 multiply 这个 key 下，所以初始状态里也要嵌套一层 multiply 对象。

2. mapStateToProps 读取状态的路径错误 #

你的 rootReducer 用 combineReducers({ multiply: multiplyReducer }) 把 multiplyReducer 的状态挂载到了全局状态的 multiply key 下，所以全局状态的结构是 { multiply: { number: ..., multiply: ... } }。但你之前直接取 state.number，自然拿不到值。

修正后的容器组件 mapStateToProps： #

const mapStateToProps = (state) => {
  // number 是在 state.multiply 这个子状态里
  return {
    multiply: state.multiply.multiply,
    number: state.multiply.number
  }
};

3. 确保应用被 Provider 正确包裹 #

你的 App 组件代码里没有显示 Provider，但必须用 react-redux 的 Provider 组件把整个应用包裹起来，这样 connect 才能拿到 store 的状态。

在入口文件（比如 index.js）里修正： #

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './path-to-your-store-file';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

4. 优化 multiplyReducer 的写法（可选但推荐） #

你的 reducer 里有多余的赋值操作，直接返回新状态对象即可，同时可以给 reducer 设置合理的默认初始状态：

const multiplyReducer = (state = { multiply: 2, number: 1 }, action) => {
  switch (action.type) {
    case 'MULTIPLY':
      return { 
        ...state, 
        number: state.number * action.payload 
      };
    case 'DIVIDE':
      return { 
        ...state, 
        number: state.number / action.payload 
      };
    default:
      return state;
  }
};

export default multiplyReducer;

最后验证 #

做完以上修正后，你的容器组件就能正确从 Redux store 中读取 number 状态，并通过 props 传递给展示组件，props.number 就不会再是 undefined 了。

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