Question

我在redux-thunk上遇到问题，它只是没有将分派传递给我的动作创建者。我正在记录它，但仍未定义：

这是我的动作创建者：

  public void setFilter(List<Toko> newList){
    data_toko = new ArrayList<>();
    data_toko.addAll(newList);
    notifyDataSetChanged();
}

这是我的Service.js类

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

这是我的route.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'
    })
  }

这是我的server.js文件

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



const routes = [

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

]

到目前为止，我还没有遇到过此类问题。当我在动作创建者内部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

这意味着我要从api获取数据，但是为什么调度不是函数？

Answer 1

除非您在调用dispatch时传递redux-store fetchInitialData属性，否则将无法正常工作。

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

真正的问题是您的redux-store那时甚至还不存在，因为您在完成承诺后就对其进行了配置...因此，您还必须解决其他问题。

派遣不是服务器端渲染中的功能

1 个答案: