React Redux reducer combineReducers 示例

在 React Redux 中，reducer 是用来处理应用中不同状态的函数。combineReducers 可以将多个 reducer 合并为一个。

Reducer

以一个简单的计数器为例，定义一个 reducer 函数：

const counterReducer = (state = 0, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

该 reducer 接收两个参数，一个是当前的状态 state，一个是 action。在这个例子中，state 初始值为0。当 action 的 type 值为 'INCREMENT' 时，返回值是当前状态加1；当 action 的 type 值为 'DECREMENT' 时，返回值是当前状态减1；当 action 的 type 值不为 'INCREMENT' 或 'DECREMENT' 时，返回当前状态。

combineReducers

在实际应用中，可能需要管理多个 reducer。combineReducers 可以将多个 reducer 合并为一个 reducer。例如：

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  counter: counterReducer,
  // 其他的 reducer
});

export default rootReducer;

在这个例子中，使用 combineReducers 将一个名为 counter 的 reducer 合并到一个名为 rootReducer 的 reducer 中。其他的 reducer 同理。

应用

将 rootReducer 应用到一个 React 组件中：

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = ({count, increment, decrement}) => {
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};

const mapStateToProps = (state) => ({
  count: state.counter,
});

const mapDispatchToProps = {
  increment,
  decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

在这个例子中，使用 connect 函数将 Counter 组件连接到 Redux 中。mapStateToProps 函数将 Redux 中的 state 映射到组件的属性中，mapDispatchToProps 函数将 action 映射到组件的属性中。

总结

在 React Redux 中，reducer 负责管理应用的状态。combineReducers 可以将多个 reducer 合并为一个 reducer。在组件中使用 connect 函数将 Redux 中的 state 和 action 映射到组件的属性中。