Диспетчеризация не является функцией при рендеринге на стороне сервера - PullRequest
Новая
       7

Диспетчеризация не является функцией при рендеринге на стороне сервера

0 голосов
/ 12 ноября 2018

У меня проблема с redux-thunk, он просто не передает отправку моему создателю действия.Я регистрирую его, но он все еще не определен:

Вот мой создатель действия: 

import * as types from './actionTypes'
import Service from '../service'



export const fetchFromApi = payload => {
  return { type: types.FETCH_FROM_API_TEST, payload }
}


export const fetchApiTestAction = () => dispatch => {
  return Service.GetUsers().then( _data => {
    dispatch(fetchFromApi( _data.data )) // you can even distructure taht like fetchFromApi(({ data }))
  }).catch ( err => {
    // error catching here 
    // you can even call an failure action here...
    // but sorry about it , i have no time for that , im sorry :(
    throw (err)
  })
}

Вот мой класс Service.js 

// Basic fetch
  async basicFetch(url, options, headers = this.authernticateHeader) {
    let fetchOptions = {}
    if(options.headers) {
      fetchOptions = {
        mode: 'cors',
        cache: 'default',
        ...options
      }
    } else {
      fetchOptions = {
        mode: 'cors',
        cache: 'default',
        ...options,
        headers
      }
    }


    // log before sending the request...
    // console.log(url, fetchOptions, fetchOptions.headers.get('Content-Type') )

    try {
      const response = await fetch(
        `${this.serverAddress}${url}`,
        { ...fetchOptions }
      )

      if(!response.ok) {
        throw {
          message: response.statusText,
          api: `${options.method} ${this.serverAddress}`
        }
      }

      const responseJson = await response.json()
      console.log('----------------------------')
      console.log(responseJson)
      console.log('----------------------------')
      return responseJson
    } catch(err) {
      throw { ...err }
    }
  }


  GetUsers = () => {
    return this.basicFetch(this.urls.GET_USERS, {
      method: 'GET'
    })
  }

Вотмой файл rout.js 

import { fetchApiTestAction } from './actions/fetchApiTestAction'



const routes = [

  {
    path: '/',
    exact: true,
    component: Home,
    fetchInitialData: fetchApiTestAction()
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/contact',
    component: Contact
  },

]

А вот мой файл server.js 

app.get('/*', (req, res, next) => {

  const activeRoute = routes.find( route => matchPath(req.url, route) ) || {}

  const _promise = activeRoute.fetchInitialData 
    ? activeRoute.fetchInitialData()
    : Promise.resolve()

  _promise.then( () => {

    const store = configureStore()
    const markup = renderToString(

      <StaticRouter location={req.url} context={{}}>
        <Provider store={store}>
          <App />
        </Provider>
      </StaticRouter>
    )

    const initialBrowserTabText = 'hi there from home page...'
    const initialState = store.getState() || {}

    const _template = template( initialBrowserTabText, initialState, markup )

    res.send(_template)
  }).catch(err => {
    console.log(err)
  })
})

До сих пор я не сталкивался с подобной проблемой.Когда я console.log(dispatch) внутри моего создателя действия (до return части), это не определено.Я должен сказать, что вот что мой терминал показывает мне: 

Server is listening on port 8000...
----------------------------
{ page: 1,
  per_page: 3,
  total: 12,
  total_pages: 4,
  data: 
   [ { id: 1,
       first_name: 'George',
       last_name: 'Bluth',
       avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg' },
     { id: 2,
       first_name: 'Janet',
       last_name: 'Weaver',
       avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg' },
     { id: 3,
       first_name: 'Emma',
       last_name: 'Wong',
       avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg' } ] }
----------------------------
TypeError: dispatch is not a function
    at eval (webpack-internal:///./src/js/actions/fetchApiTestAction.js:17:7)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Это означает, что я получаю данные из API, но почему диспетчеризация не является функцией?

1 Ответ

0 голосов
/ 12 ноября 2018

Это не сработает, если вы не передадите свойство redux-store dispatch при вызове fetchInitialData ... Примерно так: 

  const _promise = activeRoute.fetchInitialData 
    ? activeRoute.fetchInitialData(store.dispatch)
    : Promise.resolve()

Реальная проблема заключается в том, что ваше хранилище редуксов даже не существует в этот момент, потому что вы настраиваете его после того, как это обещание закончится ... Так что это еще одна проблема, к которой вам придется обратиться.

...