Question

我已经通过很多例子来了解Redux-Thunk的工作原理以及大多数商店以各种方式配置的时间。我想有旧的方式或新的方式，但我有点迷茫。这是我发现的三种模式。如果有人能解释他们之间的差异：

简单的方法：

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'

    const loggerMiddleware = createLogger()


    const store = createStore(rootReducer, applyMiddleware( thunkMiddleware, loggerMiddleware));

官方Reddit Async Exemple方式（here）：

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'

const loggerMiddleware = createLogger()

export default function configureStore(preloadedState) {
  return createStore(
    rootReducer,
    preloadedState,
    applyMiddleware(
      thunkMiddleware,
      loggerMiddleware
    )
  )
}

旧的方式？

import {compose, createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';

const createAppStore = compose(
    applyMiddleware(thunkMiddleware)
)(createStore);

export default function configureStore(initialState){
    const store = createAppStore(rootReducer, initialState);

    return store;
};

从那里我至少有四个问题：

我们还需要使用撰写吗？我只在“老”的例子中找到它？
import ReduxThunk from 'redux-thunk'和import thunkMiddleware from 'redux-thunk'之间是否存在差异？
简单的方法也是正确的吗？
我不理解Reddit Async Exemple中的preloadedState模式。

感谢。

Answer 1

createStore的签名为 createStore(reducer, [preloadedState], [enhancer]) 。

preloadedState 是您在初始化应用之前加载的初始状态。例如，如果您在服务器上预呈现第一页并希望将应用程序状态作为JSON传递到HTML中。有时您需要异步获取此状态，这是第二个示例有用的地方。您获取状态并在ajax调用的回调中使用该状态创建商店第三个论点。

enhancer是一个高阶函数，它组成商店创建者以返回新的增强型商店创建者。 applyMiddleware是redux附带的商店enhancer。如果要组合多个商店增强器，则需要使用compose功能。

例如，Chrome的redux-devtools-extension为enhancer，因此要在您的应用中使用它，您需要compose函数

let store = createStore(reducer, initialState, compose(
  applyMiddleware(...middleware),
  window.devToolsExtension ? window.devToolsExtension() : f => f
));

当您import something from 'redux-thunk'使用default export时，您可以根据需要为变量命名。这没关系。

一个简单的方法也是正确的，如果你不需要任何花哨的东西就可以正常工作。

React / redux和thunkMiddleware

1 个答案: