在Redux Reducer中读取商店的初始状态_随笔

在Redux Reducer中读取商店的初始状态

TL; DR
没有
combineReducers()
或没有类似的手动代码，
initialState
总是
state =...
在化简器中胜出，因为
state
传递给化简器的是
initialState
和不是
undefined
，因此在这种情况下不会应用ES6参数语法。
随着
combineReducers()
行为更加细微差别。在状态中指定的那些减速器
initialState
将接收到
state
。其他reducer将会收到
undefined
，因此 将退回到
state = ...
它们指定的默认参数。
通常，
initialState
胜过减速器指定的状态。这使reducer可以将对它们
有意义的初始数据指定为默认参数，但是当您从某个持久性存储或服务器对存储进行连接时，也可以（全部或部分）加载现有数据。

首先，让我们考虑一个单独的减速器的情况。
说你不使用

combineReducers()

。

然后，您的减速器可能看起来像这样：

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

现在，假设您用它创建了一个商店。

import { createStore } from 'redux';let store = createStore(counter);console.log(store.getState()); // 0

初始状态为零。为什么？因为第二个论据

createStore

是

undefined

。这是

state

第一次传递给您的减速器。当Redux初始化时，它会分派“虚拟”动作来填充状态。因此，您的

counter

减速器被称为

state

等于

undefined

。
这就是“激活”默认参数的情况。 因此，

state

现在

是默认

state

值（

state = 0

）。此状态（

）将返回。

让我们考虑另一种情况：

import { createStore } from 'redux';let store = createStore(counter, 42);console.log(store.getState()); // 42

为什么这次

而不是为什么

？因为

createStore

被称为带有

第二个参数。该参数

state

随同虚拟动作一起传递给减速器。
这次
state
不是未定义的（是
42
！），因此ES6默认参数语法无效。的

state

是

，和

从减速机返回。

现在考虑使用的情况

combineReducers()

。
您有两个减速器：

function a(state = 'lol', action) {  return state;}function b(state = 'wat', action) {  return state;}

由生成的reducer

combineReducers({ a, b })

看起来像这样：

// const combined = combineReducers({ a, b })function combined(state = {}, action) {  return {    a: a(state.a, action),    b: b(state.b, action)  };}

如果我们在

createStore

没有调用的情况下调用

initialState

，则会将其初始化

state

为

{}

。因此，

state.a

并

state.b

会

undefined

通过它调用的时间

和

减速。
双方
a
和
b
减速会收到
undefined
作为 他们的
state
论点，如果他们指定默认
state
值，这些将被退回。这就是组合化归约器

{ a: 'lol', b: 'wat'}

在第一次调用时返回状态对象的方式。

import { createStore } from 'redux';let store = createStore(combined);console.log(store.getState()); // { a: 'lol', b: 'wat' }

让我们考虑另一种情况：

import { createStore } from 'redux';let store = createStore(combined, { a: 'horse' });console.log(store.getState()); // { a: 'horse', b: 'wat' }

现在，我将指定

initialState

为的参数

createStore()

。从组合化归约器返回的状态将
我为

归约器指定的初始状态与归约器自行选择的

'wat'

默认参数组合 在一起

。

让我们回想一下组合减速器的作用：

// const combined = combineReducers({ a, b })function combined(state = {}, action) {  return {    a: a(state.a, action),    b: b(state.b, action)  };}

在这种情况下，

state

已指定，因此它不会退回到

{}

。它是一个

字段等于

'horse'

，但没有该

字段的对象。这就是为什么

reducer收到

'horse'

其作为

state

并乐意返回它的原因，而

reducer收到

undefined

其作为

state

并因此返回
其默认值的想法

state

（在我们的示例中为

'wat'

）。这就是我们获得

{ a: 'horse', b: 'wat' }

回报的方式。

综上所述，如果您坚持使用Redux约定，并在将reducer

undefined

作为

state

参数调用时从reducer返回初始状态（最简单的实现方法是指定

state

ES6默认参数值），对于组合减速器而言，这是一个很好的有用行为。
他们会首选
initialState
传递给
createStore()
函数的对象中的相应值，但是如果您没有传递任何值，或者未设置相应字段，则将
state
选择由reducer指定的默认参数。这种方法之所以有效，是因为它既提供了现有数据的初始化功能，又提供了水合功能，但是如果未保存其数据，则可以让单个化简机重置其状态。当然，您可以递归地应用此模式，因为您可以

combineReducers()

在多个级别上使用它，甚至可以通过调用化简器并将其提供给状态树的相关部分来手动组成化简器。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/5674066.html

在Redux Reducer中读取商店的初始状态

发表评论

评论列表（0条）