Release v1.6.0 : RTK Query! · reduxjs/redux-toolkit
This release adds the new RTK Query data fetching APIs to Redux Toolkit. It also adds multiple new options to createAsyncThunk for including meta fields and working with results, updates dependencies to Redux 4.1 and Immer 9, and includes a complete rewrite of our build toolchain with additional "modern" build artifacts in the package. While this is a minor release in terms of semver, this is a hu
フロントエンドの複雑さに耐えるため実践したこと / readyfor-nextjs-first
【READYFOR】実践！フロントエンド分離戦略::発表資料 https://readyfor.connpass.com/event/198730/
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
Blogged Answers: Redux - Not Dead Yet!
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson This is a post in the Blogged Answers series. Some clarification on what's going on with Redux I'm a Redux maintainer. There's been a lot of confusion, claims, and misinformation about Redux going around lately, and I want to help clear things up. Note: Updated 2020-12 with additional info and links TL;DR 🔗︎ Is
Container Component のテストを良い感じに書く
reduxのドキュメントによると connected コンポーネントは connect 対象のコンポーネントを export してテストしましょう。と書いてあります。 が、どっちかというと mapStateToProps や mapDispatchToProps がどんな挙動になるかテストしたかったので、こちらの良さげな例を自分なりに少しアレンジしてみました。 import { shallow } from 'enzyme' import { expect } from 'chai' import React from 'react' import configureStore from 'redux-mock-store' import { connect } from 'react-redux' // actionCreator const changeName = value =>
ReduxのExampleを解読する ~ ショッピングカート ~ - Qiita
Redux の Example 集の後半が結構読み応えがあったので、写経がてら面白かった箇所を書いていきます。 Redux Example https://redux.js.org/introduction/examples 今回は Shopping Cart 。 この Example の肝は、API から取得したデータをそのまま store に保存するのではなく、「正規化」という方法をとって Redux が扱いやすい形状に変化させて store にデータを保存する箇所です。「正規化」という単語はデータベースの設計でよく出てくる単語ですが、JSON にも正規化が存在するようで勉強になりました。SQL 文を書くかのごとく、APIからのデータを JavaScript で扱います。 1. redux-devtools-extension をインストール 少し Example とコードを変更します
TypescriptとReact HooksでReduxはもうしんどくない - Qiita
🏔背景 Reduxはしんどい、だるい、でかい、というイメージが定着して久しいですね 😭 僕も3年ほど前にどっぷり触ったときは「こいつぁなかなか」という感想でした。 しかしながら状態管理ライブラリやらFlux思想やらの流れとしてReduxが不可避の存在だったために、おつらい経験をされた方も多かったのかなとお察しします。 時代は巡り2019年末、令和元年のご時世ではすっかりTypescriptによる型安全、正式提供されたReact Hooksによる脱Class component・HOCフリーな省エネ設計などが定着してきており、この両者を前提とした構築がもはやスタンダードとなってきています。 諸兄の人柱的知見も相まって最近は敬遠されがちなReduxパイセンですが、この度久方ぶりにがっつりと向き合ってみると、上述した両者の恩恵を受けてなんだか垢抜けた感じになっていました。知ってましたか？
TwitterやSlackのRedux Storeを覗く
{ domainData1 : {}, domainData2 : {}, appState1 : {}, appState2 : {}, ui : { uiState1 : {}, uiState2 : {}, } } ref: Basic Reducer Structure and State Shape · Redux 正規化 Recipesでは正規化についても言及しており、リレーショナルデータを管理する場合はデータベースのように正規化することを推奨していました。 以下は投稿が複数のコメントを持つ例です。postsはcommentsのidだけを持っています。 { posts : { byId : { "post1" : { id : "post1", author : "user1", body : "......", comments : ["comment1", "comment
Using Immutable.JS with Redux - Redux
Redux Style GuideIntroductionThis is the official style guide for writing Redux code. It lists our recommended patterns, best practices, and suggested approaches for writing Redux applications. Both the Redux core library and most of the Redux documentation are unopinionated. There are many ways to use Redux, and much of the time there is no single "right" way to do things. However, time and expe
The best way to architect your Redux app – freeCodeCamp.org
This article is about how to think in Redux. We’ll try to understand how we can utilise this wonderful library to make our application more stable, robust, and maintainable. It is language agnostic, however we will keep our scope to Redux with React. For those who haven’t used Redux before, I will quote from the docs: Redux is a predictable state container for JavaScript apps.It is only a 2kb libr
Redux Fundamentals, Part 4: Store | Redux
How to create a Redux storeHow to use the store to update state and listen for updatesHow to configure the store to extend its capabilitiesHow to set up the Redux DevTools Extension to debug your app IntroductionIn Part 3: State, Actions, and Reducers, we started writing our example todo app. We listed business requirements, defined the state structure we need to make the app work, and created a
Reduxにドメイン層を導入する - Qiita
【2018/6/18更新】immutable.js を利用せずに、当エントリー同等以上の開発が可能な、FP・型推論の強いモジュールを公開しました。https://qiita.com/Takepepe/items/a79e767b38981c910c3f ドメインモデルの需要 フロントエンドフレームワークでプロダクトを作り込んでいくと、ビジネスロジックが view に介入しすぎてしまうことが少なからずあります。下記の様なビジネスロジックが散在しているコードに、スケール耐性があるとは思えません。リリース当時は単純だったものが、複雑に変化していくケースは往々にしてあります。 function TodoItems (props) { const { todos, updateTodo, deleteTodo } = props const items = todos.map(item , i) =
Reduxいらないかも？！GraphQL + ReactでReduxを使わずにいい感じに実装した - Qiita
はじめに RailsとReact、GraphQLを使って簡単なアプリを作りたく、勉強がてらRails + React + GraphQL + Apolloで簡単なアプリを作ってみました。 その際に、GraphQL使うならReduxを使うメリットってないんじゃないかなと思い、Reduxを使わずにいい感じに実装できないかなと試行錯誤したことを記事にしてみようと思います。 実際のアプリはTakumi0901/rails-react-sampleにあります。 もしstarとかforkとかissueもらえると嬉しいです。よろしくお願いします^ ^ Atomic Designを使ったディレクトリ構成 Atomic Designとは Atomic Design | Brad Frost Atomic Design を分かったつもりになる | DeNA DESIGN BLOG Atomic Designで
MongoDB のスキーマデザイン - ボクココ
さて、今回はアプリを書くほうのエンジニアにとっては一番大事なスキーマ設計について学んだことをまとめていこう。ここはユーザが増えるにつれて全てのエンジニアが直面する部分なので、予めそれらを予見してスキーマを設計できるようになる必要がある。 正規化と非正規化 ここがMongoDBにおいて最も悩む部分だ。どれをEmbed Document にして、どれをReference にするか、だ。これはそのアプリケーションの特性によってどちらかにするかをアプリエンジニア自身が決定しなければならない。腕の見せ所だ。 ただ、それがしっかりと理解していれば割と簡単に決められる基準はある。 Embed Document References 小さなサブドキュメント 大きなサブドキュメント 頻繁なデータ更新が無い 変わりやすいデータ データ更新に時間がかかってもいい 一瞬のデータ反映が必要 データの増え方が小さい
Normalizrを使用したReduxの実装パターン - Qiita
課題 APIなどで取得したデータはたいてい深くネストしていることがおおく、reducerでのデータ更新処理が複雑になりがち。 そこでデータを Normalie(平たく)することで実装しやすくする。 Reduxの公式ドキュメントにも実装パターンの例が載っているが、今回は、Normalizr を使用した場合の実装パターンを見てみる。 使い方 基本的な使い方はREADME参照。 例えばデータが元データがこんな形だった場合、 [ "123": { "id": "123", "author": { "id": "1", "name": "Paul" }, "title": "My awesome blog post", "comments": [ { "id": "324", "text": "Awesome comment", "commenter": { "id": "2", "name": "
ドメイン駆動Vuexで複雑さに立ち向かう
スタディスト開発部、フロントエンド担当の小宮山です。走ることが楽しくなりすぎてフルマラソン完走が当面の目標です。 今回は私達が進めているUIリニューアルプロジェクトにおける、フロントエンド設計の心臓部についてご紹介したいと思います。盛り上がりつつあるものの、まだまだ実践的な情報が少ないVue界隈に少しでも貢献できましたら幸いです。 画面駆動Vuexの頃プロジェクト始動当時は私含め大規模プロダクトにVuex（さらにその他Flux状態管理も）を導入して開発を進める経験も知見もほぼない状況でした。 そして開発していく画面デザインの大枠は出揃っている状態だったので、計画も実装も画面単位で区切って進みだしていきます。 こうした状況でVuexのstoreはどのような方針で実装されていくか。正確に表現するなら、特に方針なく実装していくとどうなるか。画面ファーストで、画面から使いやすく、画面ごとに専用なs
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - markerikson/project-minimek: A sample app to demonstrate various useful Redux techniques, accompanying the blog series at http://blog.isquaredsoftware.com/series/practical-redux
Typings for "normalized" redux state shape
Isolating Redux Sub-Apps | Redux
[archived] ReduxのFAQを読み直す - Qiita![[archived] ReduxのFAQを読み直す - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9cecdcd708b5f1a1aa30e8bda46680db96e4a76a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-4.0.0%2526w%253D840%2526h%253D380%2526txt%253D%25255Barchived%25255D%252520Redux%2525E3%252581%2525AEFAQ%2525E3%252582%252592%2525E8%2525AA%2525AD%2525E3%252581%2525BF%2525E7%25259B%2525B4%2525E3%252581%252599%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D54%2526txt-clip%253Dellipsis%2526txt-align%253Dcenter%25252Cmiddle%2526s%253Dd1baaa3909e6cb9b02d85abb1e1f516d%26mark-align%3Dcenter%252Cmiddle%26blend%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-4.0.0%2526w%253D840%2526h%253D500%2526txt%253D%252540terrierscript%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D45%2526txt-align%253Dright%25252Cbottom%2526s%253Ded893b7eabdaa75da91d28680de5bf50%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3Df5a6c1ac9dd5d9d955e5c24ed444a900)
