Question

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

参数'initialState'不能在其初始化程序中引用。

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))
  )
}

withReduxStore库文件

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的工作原理，在简化器中不需要使用defaultInitialState。如果未使用createStore，则combineReducers的初始状态优先。

参数“ initialState”不能在其初始化程序中引用

1 个答案: