Javascript 分派不是服务器端呈现中的函数
我对redux thunk有一个问题,它只是没有将调度传递给我的动作创建者。我正在记录它,但它仍然没有定义: 这是我的行动创造者:Javascript 分派不是服务器端呈现中的函数,javascript,reactjs,redux,react-redux,redux-thunk,Javascript,Reactjs,Redux,React Redux,Redux Thunk,我对redux thunk有一个问题,它只是没有将调度传递给我的动作创建者。我正在记录它,但它仍然没有定义: 这是我的行动创造者: import * as types from './actionTypes' import Service from '../service' export const fetchFromApi = payload => { return { type: types.FETCH_FROM_API_TEST, payload } } export
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'
})
}
这是我的routes.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)
})
})
这意味着我正在从api获取数据,但为什么dispatch不是一个函数?除非在调用
fetchInitialData
时传递redux storedispatch
属性,否则它将不起作用。。。大概是这样的:
const _promise = activeRoute.fetchInitialData
? activeRoute.fetchInitialData(store.dispatch)
: Promise.resolve()
真正的问题是你的redux商店在那一点上根本不存在,因为你是在承诺完成后配置它的。。。因此,这是您必须解决的另一个问题。为什么它首先是一个函数?甚至在配置redux存储之前,您正在运行
fetchInitialData
dispatch
是redux存储的一个属性,如果没有redux存储,则不能dispatch
。。。另外,请注意,activeRoute.fetchInitialData
不是thunk。。。如果是thunk,它将被调度。首先,感谢您的回复,但我如何配置我的存储,使其在服务器需要调度操作以从端点获取数据时可用于服务器端???fetchInitialData
最终出现在我的service.js配置文件中,如何能够在我的service.js文件中实例化存储?这怎么可能呢?你是一个杰作,照顾好你自己,非常感谢你回答了我这个该死的正确答案。爱你。。。
const _promise = activeRoute.fetchInitialData
? activeRoute.fetchInitialData(store.dispatch)
: Promise.resolve()