如何在React-Redux中返回合并后的reducers？

嘿，我看你正在测试用React-Redux管理状态和props，我把你给出的代码补全并梳理了每个关键部分，这样你能更直观地理解整个流程：

完整示例代码 #

Index.js（入口文件） #

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, combineReducers } from 'redux'
import Counter from './counter'

// 定义计数器Reducer，处理INCREMENT和DECREMENT动作
function counterReducer(state = { count: 0 }, action) {
  switch(action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 }
    case 'DECREMENT':
      return { count: state.count - 1 }
    default:
      return state // 必须返回默认状态，避免初始状态异常
  }
}

// 组合多个Reducer（当前仅一个，方便后续扩展多模块状态）
const rootReducer = combineReducers({
  counter: counterReducer
})

// 创建Redux Store实例
const store = createStore(rootReducer)

// 用Provider包裹根组件，让所有子组件能全局访问Store
render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
)

counter.js（计数器组件） #

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Counter extends Component {
  render() {
    const { count, increment, decrement } = this.props
    return (
      <div style={{ padding: '20px' }}>
        <h2>当前计数: {count}</h2>
        <button onClick={increment} style={{ marginRight: '10px' }}>+1</button>
        <button onClick={decrement}>-1</button>
      </div>
    )
  }
}

// 将Store中的状态映射到组件的props
const mapStateToProps = (state) => {
  return {
    count: state.counter.count
  }
}

// 将动作分发函数映射到组件的props
const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' })
  }
}

// 连接组件与Redux Store，导出包装后的组件
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

核心模块说明 #

• Provider组件：React-Redux的核心全局容器，通过store属性将Redux Store传递给所有后代组件，避免手动逐层传递状态。
• Reducer函数：负责处理状态更新的纯函数，永远不能直接修改原状态，必须返回新的状态对象。默认分支要返回原状态，保证初始渲染时状态正常。
• createStore & combineReducers：createStore用来生成Store实例；combineReducers用来合并多个Reducer，让状态结构模块化，后续新增状态模块时更易维护。
• connect函数：React组件与Redux Store的桥梁，mapStateToProps把Store状态映射为组件props，mapDispatchToProps把动作分发函数映射为组件props，让组件能通过props访问状态、触发状态更新。

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