ReactでReduxSagasを使用する方法を学ぼうとしています。簡単な例をまとめますが、私にはうまくいきません。
App.jsファイルのコード：
const sagaMiddleware = createSagaMiddleWare();
const store = createStore(
reducers,
applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(rootSaga);
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
アクションクリエーター：
export const getPosts = () => {
return {
type: 'GET_POSTS'
}
};
レデューサー：
const combineReducers = (state= {}, action) => {
switch (action.type) {
case 'GET_POSTS':
return { ...state, loading: true};
default:
return state;
}
}
export default combineReducers;
アクションを呼び出す必要があるマイボタンコンポーネントonClick
const ButtonContainer = (getPosts) => (
<button onClick={() => getPosts()}>Get Posts</button>
)
const mapDispatchToProps = {
getPosts: getPosts
}
export default connect(null, mapDispatchToProps)(ButtonContainer);
問題は、ページの読み込み時にこのエラーが発生することです。
Uncaught TypeError: getPosts is not a function....
エラーが何を言っているかは理にかなっています。関数ではなくオブジェクトを取得していますが、これを機能させるために何をする必要があるのかよくわかりません。
ありがとうございました！
現在使用しているコードは、実際にはgetPostsアクションをレデューサーにディスパッチしていません。
mapDispatchToPropsを次のように変更します。
const mapDispatchToProps = dispatch => {
getPosts: bindActionCreators(getPosts, dispatch)
}
また、次のものが必要です。
import { bindActionCreators, Dispatch } from "redux"
また、ButtonContainerを次のように変更します。
const ButtonContainer = props => (
<button onClick={() => props.getPosts()}>Get Posts</button>
)
ディスパッチの詳細については、この優れたドキュメントを参照してください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加