Reactアプリケーションの状態管理のためのOSSライブラリである、React Reduxのバージョン7.1.0で追加された、Hooks APIの公式ドキュメントを翻訳していきます。
- React Redux Hooks公式ドキュメント翻訳(概要編)
- React Redux Hooks公式ドキュメント翻訳(useSelector編)
- React Redux Hooks公式ドキュメント翻訳(useDispatch, useStore編)
2021/1/6公開。原文リンクは以下。
・公式ドキュメント(React Redux Hooks):https://react-redux.js.org/api/hooks
#Hooks APIとは
Reactの新しいhooks APIはローカルなコンポーネントのstateをより簡単に扱うことができる関数コンポーネントです。
React Reduxは今回、高階コンポーネント(HOC)の一つである既存のconnect関数の代わりに、いくつかのhook APIを提供します。これらのAPIを使えば、connect関数であなたのコンポーネントをラップすることをせずとも、ReduxのStoreに登録し、Actionを送る(dispatchする)ことが可能になります。
Hooks APIはReact Reduxのバージョン7.1.0で追加されました。
#React ReduxアプリでHooks APIを使う
connect関数と同様に、Hooks APIを使う前の準備として、コンポーネントの階層全体でReduxのStoreを使えるように、以下のようにProviderを設定する必要があります。
const store = createStore(rootReducer)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
この準備が整えばこれから紹介する、React Redux hooks APIの全てをあなたの関数コンポーネントの中で使用することができます。
次回はHooks APIの一つ、useSelector()について説明します。