javascript - 无法在其初始化程序中引用参数 'initialState'

Question

在我的 ReactJS/Typescript 应用程序中，我的 store.ts 中出现以下错误:

Parameter 'initialState' cannot be referenced in its initializer.

interface IinitialState {
  fiatPrices: [];
  wallets: [];
  defaultCurrency: string;
}

const initialState = {
  fiatPrices: [],
  wallets: [],
  defaultCurrency: ''
}

...

export function initializeStore (initialState:IinitialState = initialState) {
  return createStore(
    reducer,
    initialState,
    composeWithDevTools(applyMiddleware(thunkMiddleware))
  )
}

还有其他人遇到过这个问题吗？目前必须依赖 //@ts-ignore

---

整个 store.ts 文件:

import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'

interface IinitialState {
  fiatPrices: [];
  wallets: [];
  defaultCurrency: string;
}

const initialState = {
  fiatPrices: [],
  wallets: [],
  defaultCurrency: ''
}

export const actionTypes = {
  GET_PRICES: 'GET_PRICES'
}

// REDUCERS
export const reducer = (state = initialState, action: any) => {
  switch (action.type) {
    case actionTypes.GET_PRICES:
      return state
    default:
      return state
  }
}

// MOCK API
export async function getProgress(dispatch: any) {
  try {
    const priceList = await fetchPrices();
    return dispatch({ type: actionTypes.GET_PRICES, payload: priceList })
  }
  catch (err) {
    console.log('Error', err);
  }
}

// Wait 1 sec before resolving promise
function fetchPrices() {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ progress: 100 });
      }, 1000);
  });
}

// ACTIONS
export const addLoader = () => (dispatch: any) => {
  getProgress(dispatch);
}

// @ts-ignore
export function initializeStore (initialState:IinitialState = initialState) {
  return createStore(
    reducer,
    initialState,
    composeWithDevTools(applyMiddleware(thunkMiddleware))
  )
}

---

与ReduxStore lib文件

import React from 'react'
import { initializeStore, IinitialState } from '../store'

const isServer = typeof window === 'undefined'
const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__'

function getOrCreateStore (initialState: IinitialState) {
  // Always make a new store if server, otherwise state is shared between requests
  if (isServer) {
    return initializeStore(initialState)
  }

  // Create store if unavailable on the client and set it on the window object
  // Waiting for (@ts-ignore-file) https://github.com/Microsoft/TypeScript/issues/19573 to be implemented
  // @ts-ignore
  if (!window[__NEXT_REDUX_STORE__]) {
    // @ts-ignore
    window[__NEXT_REDUX_STORE__] = initializeStore(initialState)
  }
  // @ts-ignore
  return window[__NEXT_REDUX_STORE__]
}

// @ts-ignore
export default App => {
  return class AppWithRedux extends React.Component {
    // @ts-ignore
    static async getInitialProps (appContext) {
      // Get or Create the store with `undefined` as initialState
      // This allows you to set a custom default initialState
      const reduxStore = getOrCreateStore()

      // Provide the store to getInitialProps of pages
      appContext.ctx.reduxStore = reduxStore

      let appProps = {}
      if (typeof App.getInitialProps === 'function') {
        appProps = await App.getInitialProps(appContext)
      }

      return {
        ...appProps,
        initialReduxState: reduxStore.getState()
      }
    }

    // @ts-ignore
    constructor (props) {
      super(props)
      this.reduxStore = getOrCreateStore(props.initialReduxState)
    }

    render () {
      return <App {...this.props} reduxStore={this.reduxStore} />
    }
  }
}

Answer 1

function initializeStore (initialState:IinitialState = initialState) { ... }

无论如何都是无效的，不仅仅是在 TypeScript 中。使用 @ts-ignore 来抑制错误是不正确的。

initialState 参数将同名变量隐藏在封闭范围内，因此默认参数值指的是参数本身。这将导致丢弃 ES5 目标的默认参数值和 ES6 目标的错误。

参数和默认值应该有不同的名称:

function initializeStore (initialState:IinitialState = defaultInitialState) { ... }

请注意，由于 initial state 的原因，reducer 中不需要使用 defaultInitialState作品。如果未使用 combineReducers，则来自 createStore 的初始状态优先。