套餐:
redux-observable
@2.0.0-rc.2rxjs
最新的universal-rxjs-ajax
开发分支next-redux-wrapper
最新的next.js
最新的
我有一个简单的页面getStaticProps
:
export const getStaticProps = wrapper.getStaticProps((store) => async (ctx) => {
store.dispatch({ type: 'ADD_DATA' });
// const response = await fetch('https://rickandmortyapi.com/api');
// const data = await response.json();
// store.dispatch({ type: 'SERVER_ACTION', payload: data.characters });
return {
props: {},
};
});
动作'ADD_DATA'
触发动作'SERVER_ACTION'
:
export const AddDataEpic: Epic = (action$) =>
action$.pipe(
ofType('ADD_DATA'),
mergeMap((action) =>
request({ url: 'https://rickandmortyapi.com/api' }).pipe(
map((response) => {
return {
type: 'SERVER_ACTION',
payload: response.response.characters,
};
})
)
)
);
在reducer
incase 'SERVER_ACTION':
子句中,我收到了有效负载:
const server = (state: State = { data: null }, action: AnyAction) => {
switch (action.type) {
case HYDRATE: {
console.log('HYDRATE >', action.payload); // logs out "HYDRATE > { server: { data: null } }"
return {
...state,
...state.server,
...action.payload.server,
};
}
case 'SERVER_ACTION': {
console.log('SERVER_ACTION >', action.payload); // logs out "SERVER_ACTION > https://rickandmortyapi.com/api/character"
return {
...state,
...state.server,
data: action.payload,
};
}
default:
return state;
}
};
但是有效载荷没有传递给HYDRATE
行动:
console.log('HYDRATE >', action.payload); // logs out "HYDRATE > { server: { data: null } }"
'SERVER_ACTION'
如果我从内部调度动作getStaticProps
:
export const getStaticProps = wrapper.getStaticProps((store) => async (ctx) => {
// store.dispatch({ type: 'ADD_DATA' });
const response = await fetch('https://rickandmortyapi.com/api');
const data = await response.json();
store.dispatch({ type: 'SERVER_ACTION', payload: data.characters });
return {
props: {},
};
});
接收载荷HYDRATE
内部的动作:reducer
HYDRATE > { server: { data: 'https://rickandmortyapi.com/api/character' } }
我不明白我的代码有什么问题。
可能是其中一个库中的错误吗?还是我的代码有错误?
如果有人有任何建议,请