Redux 中如何实现多个 reducer-JavaScript中文网-JavaScript教程资源分享门户

Redux 中如何实现多个 reducer

在使用 Redux 进行状态管理时，我们经常需要实现多个 reducer 来管理不同状态之间的变化。本文将介绍如何在 Redux 中实现多个 reducer，包括如何将它们组合起来。

什么是 reducer

Reducer 是 Redux 中的一个重要概念，负责处理应用程序的状态变化。Redux 中的状态被存储在一个全局的 store 对象中，由于状态无法直接被改变，因此需要通过 action 触发 reducer 来对状态进行更新。

Reducer 对一个 state 对象进行操作，接收两个参数：当前状态和一个 action。根据 action 的类型，Reducer 会返回一个新的状态。下面是一个简单的 reducer 示例：

// javascriptcn.com 代码示例
const initialState = { count: 0 }

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 }
    case 'DECREMENT':
      return { ...state, count: state.count - 1 }
    default:
      return state
  }
}

上面的代码示例定义了一个名为 counterReducer 的 reducer，它接收一个名为 state 的对象和一个名为 action 的对象。如果 action 的类型是 INCREMENT，则返回一个新的状态对象，其中 count 属性加 1，如果 action 的类型是 DECREMENT，则返回一个新的状态对象，其中 count 属性减 1，如果 action 的类型未知，则返回当前状态。

如何实现多个 reducer

在实际的项目中，我们通常需要管理多个与应用程序相关的状态，因此需要多个 reducer 来分别处理这些状态的变化。Redux 提供了一个 combineReducers 函数来帮助我们将多个 reducer 组合成一个根 reducer。

combineReducers 函数接收一个对象参数，其中包含多个 reducer。这些 reducer 将各自处理不同的状态，并将结果组合成一个对象，作为应用的整体状态。下面是一个简单的示例：

// javascriptcn.com 代码示例
import { combineReducers } from 'redux'
import counterReducer from './counterReducer'
import userReducer from './userReducer'

const rootReducer = combineReducers({
  counter: counterReducer,
  user: userReducer
})

export default rootReducer

上面的代码示例中，我们通过调用 combineReducers 函数将名为 counterReducer 和 userReducer 的两个 reducer 组合成一个 rootReducer。我们可以使用这个 rootReducer 来作为应用程序的根 reducer。

增强器 (middlewares)

增强器是 Redux 中的另一个重要概念，它用于增强 store 的功能。通过使用增强器，我们可以给 store 添加额外的功能，例如异步操作、日志记录等等。Redux 提供了一个 applyMiddleware 函数来支持增强器。

applyMiddleware 函数接收一个或多个增强器，返回一个函数。这个函数接收 createStore 函数作为参数，并返回一个新的增强版 createStore 函数。下面是一个简单的示例：

// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducers'

const logger = store => next => action => {
  console.log('dispatching', action)
  const result = next(action)
  console.log('next state', store.getState())
  return result
}

const store = createStore(rootReducer, applyMiddleware(logger))

上面的代码示例中，我们定义了一个 logger 增强器，并通过 applyMiddleware 函数将它应用到 store 中。这个 logger 增强器用于记录每次 action 的类型以及导致状态更改后的新状态。

总结

本文介绍了如何在 Redux 中实现多个 reducer，并将它们组合为一个根 reducer。我们还介绍了增强器的概念，它可以为 store 添加额外的功能。对于需要管理多个状态的应用程序，这些知识点都是非常重要的。在日常开发中，我们可以使用 combineReducers 和 applyMiddleware 等函数来更加便捷地实现 Redux 的状态管理。

示例代码

下面是一个示例，展示了如何在 Redux 中创建多个 reducer，并使用 combineReducers 和 applyMiddleware 将它们组合起来：

// javascriptcn.com 代码示例
import { createStore, combineReducers, applyMiddleware } from 'redux'

// 定义两个 reducer
const countReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

const userReducer = (state = null, action) => {
  switch (action.type) {
    case 'LOGIN':
      return action.payload
    case 'LOGOUT':
      return null
    default:
      return state
  }
}

// 将两个 reducer 组合成一个根 reducer
const rootReducer = combineReducers({
  count: countReducer,
  user: userReducer
})

// 定义一个增强器
const logger = store => next => action => {
  console.log('dispatching', action)
  const result = next(action)
  console.log('next state', store.getState())
  return result
}

// 创建 Redux store，并将增强器应用到 store 中
const store = createStore(rootReducer, applyMiddleware(logger))

// 在某个组件中发起一个 action
store.dispatch({ type: 'INCREMENT' })

// 在另一个组件中发起一个 action
store.dispatch({ type: 'LOGIN', payload: { name: 'Alice' } })

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654dee947d4982a6eb74a79c