Redux で同期、非同期 API 通信を行う [React.js] | 酒と涙とRubyとRailsと
Redux で API を使って外部と通信をするのに適切なレイヤーは Action Creator が良いとされています。 😼 Action Creator についてAction Creator とは、Action を作るためのロジックを記載する部分です。 // Action creator function setUserName(userName) { return { type: "SET_USER_NAME", UserName }; } Action Creator はシンプルな Action オブジェクトを返す想定になっており、同期処理が前提となります。 🐡 Action Creator での非同期処理Action Creator で非同期処理を行うためには、以下の middleware を使うのが一般的なようです。 redux-thunk redux-saga 🐝 Sa
![Redux で同期、非同期 API 通信を行う [React.js] | 酒と涙とRubyとRailsと](https://cdn-ak-scissors.b.st-hatena.com/image/square/c2ea7e72d0d7f3ba6c237909f321e67ffbdaa24e/height=288;version=1;width=512/https%3A%2F%2Fmorizyun.github.io%2Fimg%2Fog_image.png)
React+Redux で Todoアプリを作ってみる
ReactでTodoアプリを作ってみる Reactのサンプルとして、Todoアプリを作ってみます。 テキストボックスで入力した値が、画面に追加される単純なものを作っていきます。 状態管理には Redux を使用します。 install まずは必要なものをインストールします。 create-react-app $ npm install -g create-react-app Reactのプロジェクトは自力で構築するのは面倒なので、facebook製の create-react-app を使います。 create-react-app $ create-react-app react-redux-todo create-react-app でプロジェクトを作成します。少し時間がかかります。 Redux インストール $ cd react-redux-todo $ npm install --s
React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita
Facebook が開発したUI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*個人的解釈です） もともとは Flux と言う、データの流れを一方向に制限することで、流れを追いやすくするという、オブザーバーパターンの亜種から、さらに転じた考え方。 Redux と言う名前は 「Reducer」 + 「Flux」 で 「Redux」だそうです。array.reduce と同じような役割を Reducer が担います。詳しく知りたい方は作者の発表をご覧ください Dan Abramov
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Node.js】TypeScript製Node.jsフルスタックフレームワーク Nest 導入編