redux - 对 createStore 在 redux 中的工作方式感到困惑

Question

我在学习 Redux 时遇到了 createStore 函数。因此，据我了解，createStore 接收 3 个参数:

reducer
initial state
enhancers (for simplicity we will use only middlewares)

但是当我们在操作中使用 createStore 时，我们不会将初始状态作为第二个参数传递，而是将默认状态传递给 reducer，如下所示:

const initialState = {counter:0}
const reducer =(state=initialState, action)=>...

问题是为什么我们不将初始状态作为第二个参数而是将 initialState 传递给 reducer？

Answer 1

我认为您混淆了reducer 的initial 状态和应用程序的全局状态。

全局状态只是指您应用中所有 reducer 的组合状态。

为简单起见，我们假设您的应用中只有一个 reducer 。

reducer :

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

所以这个简单的函数 todos 就是我们的 reducer，无论何时运行，它都会为我们提供当前状态树。

所以这是我们 createStore 的第一个参数。

初始状态:

['Understanding Store']

让我们假设我们的初始状态是一个包含 1 个项目的数组，如上所示。

这将是我们 createStore 的第二个参数。

现在我们像这样创建我们的商店:

import { createStore } from 'redux'

//... code
.
.
.
const store = createStore(todos, ['Understanding Store'])

现在我们的商店已经创建好了。没什么特别的，store 基本上是一个对象，上面几乎没有方法。

其中一种方法是dispatch。此方法有助于调度一个 Action ，该 Action 将通过我们的 reducer 运行，然后更新状态。

所以当我们这样做的时候

store.dispatch({
  type: 'ADD_TODO',
  text: 'Learn methods on Store'
})

这将更新我们的状态如下:

['Understanding Store','Learn methods on Store']

但是当您的应用变大时，您可能希望创建不同的函数(reducer)来管理全局状态的不同部分。

如果我们还有一个 reducer，比如 counter.js :

export default function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }

}

然后为了将我们的第一个 reducer todos 和这个计数器 reducer 结合起来，我们有一个名为 combineReducer 的实用程序。

rootReducer.js

import { combineReducers } from 'redux'
import todos from './todos'
import counter from './counter'

export default combineReducers({
  todos,
  counter
})

然后使用createStore，你只需这样做:

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

const store = createStore(rootReducer);

在使用 combineReducers 时需要遵循某些规则。

阅读规则here