React Hooks ✖️ Reduxを使ってみて 自分なりに詰まったところをまとめてみた
自分の作っているサービスで初めてReact Hooks, reduxを使用したので自分が詰まったところをまとめてみました!
この記事はReact Hooks, reduxを使う上で、自分が詰まったところについて書いています。
それぞれ個々の説明に関しては公式のドキュメントや別記事をお読みください
参考にさせていただいた記事
Redux Hooks によるラクラク dispatch & states
React Hooksでredux / react-reduxでやってたことを色々やってみる
🎉React 16.8: 正式版となったReact Hooksを今さら総ざらいする
この記事の対象読者
- 私のようなReact超初心者
- React Hooks, redux それぞれは何となくわかったけど一緒に使う方法がわからない方
私の開発環境
- macOS Mojave 10.14.6
- Node.js 12.13.0
- React 16.12.0
- create-react-appでアプリの雛形を作成
今回作るもの
- ボタンを押したら足したり引いたりできものを作ります
- macOS Mojave 10.14.6
- Node.js 12.13.0
- React 16.12.0
- create-react-appでアプリの雛形を作成
今回作るもの
- ボタンを押したら足したり引いたりできものを作ります
actionを作る
src/actions/action.js
にactionを定義します。
今回は足したり引いたりするだけなのでこの二つでいいでしょう。
export const incrementAction = () => ({
type: 'INCREMENT',
});
export const decrementAction = () => ({
type: 'DECREMENT',
});
reducerを作る
src/reducers/counterReducer.js
にreducersを定義します。
今回は、combineReducersを使いrootReducerでそれぞれのreducerをまとめる形にしました。
const rootReducer = combineReducers({
counterReducer,
});
export default rootReducer
const initialState = {
counter: 0,
};
export default function counterReducer(state = initialState, action) {
switch (action.type) {
case "INCREMENT":
return {counter: state.counter + 1}
case "DECREMENT":
return {counter: state.counter - 1}
}
return {counter: state.counter}
}
この時注意しないといけない点が、returnする際に連想配列の形にすることです!
私はstate + 1
やstate.counter + 1
としていたため、うまく受け渡しができていませんでした
storeを作る
react-create-app
で雛形を作った場合src/index.js
があるのでそこに書いていきましょう!
ReactDOM.renderしているファイルでcreateStoreにrootReducerを渡します。
作成したstoreをProviderに渡して下のコンポーネントでも使えるようにします。
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
);
呼び出す
index.js
で呼び出しているコンポーネントで上で定義したものを呼び出していきます。
react-create-app
で雛形を作った場合src/App.js
です!
export default function App() {
const dispatch = useDispatch()
const counter = useSelector(state => state.counterReducer.counter);// 使用するreducerを引数に渡す。
return (
<div className="App">
<p> count: {counter} </p>
<button onClick={() => dispatch(incrementAction())}>たす</button>
<button onClick={() => dispatch(decrementAction())}>ひく</button>
</div>
);
}
この時注意しないといけない点が、useSelectorに引数を渡す際ちゃんとreducerを指定して渡すことです!
reducerをrootでまとめているのでuseSelector(state => state.counter)
の様にしてしまうと当たり前ですがundefind
が返ってきてしまいます。
以上で完了です、ページにアクセスしてみましょう。
まとめ
今回はじめてReact Hooksを使ってみたんですがすごく便利ですね!
まだ出たばかりで資料もすくなかったため、僕の様な超初心者でもわかるように僕が詰まったりしたところを丁寧に書いてみました。
Reactを書くのは初めてなので、この書き方はおかしい!こっちの方がいい!みたいなご指摘がありましたらぜひコメント等いただければと思います。
Author And Source
この問題について(React Hooks ✖️ Reduxを使ってみて 自分なりに詰まったところをまとめてみた), 我々は、より多くの情報をここで見つけました https://qiita.com/7777110/items/fb6bc5605ce783e2d74e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .