遵循反应原生和 redux 的代码是什么意思

Question

我正在引用现有项目的代码，但我被困在没有得到代码目的的地步。

我目前已经开始使用 redux，并直接找到了如下所示的代码，其中包含中间件。

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);

我不明白这段代码在做什么。请帮助我理解这三行代码的作用。

Answer 1

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);

这一行创建一个函数(createStoreWithMiddleware(，它将接受一个参数列表，并创建一个应用thunk中间件的存储对象。Thunk 允许您更轻松地处理副作用逻辑。

const reducer = combineReducers(reducers);

该系列将所有单独的减速器组合成一个完整的减速器。这意味着无论何时调度操作，它都会发送到项目中的所有化简器。

const store = createStoreWithMiddleware(reducer);

此行使用上一行的化简器创建您的商店，以便应用thunk中间件。

Answer 2

applyMiddleware 函数只是使用自定义功能扩展 redux 的一种方式。在您的情况下，您正在使用 thunk，这是一种通过调度函数将控制反转到您的操作的方法。您还可以组合更多功能，记录器是一个有用的功能。

第二行组合化简

器，您只是将实现中定义的所有化简器组合在一起。由于您可以拥有多个状态，因此它允许您将状态存储在同一存储中。

第三行，您只是创建商店，其中包含组合了化简器和您之前定义的自定义功能。

您可以在此处阅读有关应用中间件的更多信息：https://redux.js.org/api/applymiddleware