代码之家  ›  专栏  ›  技术社区  ›  Leon Gaban

参数“initialState”不能在其初始值设定项中引用

  •  1
  • Leon Gaban  · 技术社区  · 6 年前

    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


    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} />
        }
      }
    }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Estus Flask    6 年前
    function initializeStore (initialState:IinitialState = initialState) { ... }
    

    @ts-ignore

    initialState 参数从封闭范围中隐藏同名变量,因此默认参数值引用参数本身。这将导致ES5目标放弃默认参数值,ES6目标出现错误。

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

    请注意 defaultInitialState 在减速器中不需要,因为 initial state createStore 如果 combineReducers