Redux组件无法返回products初始状态问题问询

嘿，我来帮你搞定这个问题！从你贴的代码来看，核心问题大概率出在 Redux store 的 reducer 合并环节，或者组件里的状态映射没做对，咱们一步步捋清楚：

1. 先检查根Reducer的合并配置 #

你只单独定义了products-reducer，但Redux要求所有子reducer必须合并成一个根reducer才能用来创建store。如果跳过这一步，全局state里根本不会有products这个状态分支，组件自然拿不到数据。

你需要新增一个rootReducer.js文件，把products reducer合并进去：

import { combineReducers } from 'redux';
import products from './products-reducer';

// 这里的key（products）就是之后全局state里的属性名
export default combineReducers({
  products
});

然后创建store的时候，必须使用这个根reducer：

import { createStore } from 'redux';
import rootReducer from './rootReducer';

const store = createStore(rootReducer);
export default store;

2. 确认Products组件的状态映射是否正确 #

在组件里用connect绑定Redux状态时，要确保你从全局state里正确取出products分支：

示例代码如下：

import { connect } from 'react-redux';

const Products = ({ products }) => {
  return (
    <div>
      {products.map(product => (
        <div key={product.id}>
          {product.name} - ${product.price}
        </div>
      ))}
    </div>
  );
};

// 这里的state是全局状态，要对应根reducer里定义的products属性
const mapStateToProps = (state) => ({
  products: state.products
});

export default connect(mapStateToProps)(Products);

3. 检查应用顶层的Provider配置 #

最后要确认你在应用的最外层用Provider包裹了组件，并且传入了正确的store：

import { Provider } from 'react-redux';
import store from './store';
import Products from './Products';

function App() {
  return (
    <Provider store={store}>
      <Products />
    </Provider>
  );
}

额外排查点 #

如果上面几步都做了还是没效果，可以检查：

• 你的initialState文件是否正确导出（你贴的代码里是export default，没问题）
• products-reducer里的默认参数是否正确（state = initialState.products，这步是对的）

绝大多数情况下，忘记合并reducer是导致这个问题的罪魁祸首，按照上面的步骤调整后应该就能正常获取products的初始状态了。

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