サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
iPhone 16e
redux.js.org
Building an Undo and Redo functionality into an app has traditionally required conscious effort from the developer. It is not an easy problem with classical MVC frameworks because you need to keep track of every past state by cloning all relevant models. In addition, you need to be mindful of the undo stack because the user-initiated changes should be undoable. This means that implementing Undo an
What Redux is and why you might want to use itKey Redux terms and conceptsHow data flows through a Redux app IntroductionWelcome to the Redux Essentials tutorial! This tutorial will introduce you to Redux and teach you how to use it the right way, using our latest recommended tools and best practices. By the time you finish, you should be able to start building your own Redux applications using t
Redux FAQ: PerformanceTable of ContentsRedux FAQ: PerformanceTable of ContentsPerformanceHow well does Redux “scale” in terms of performance and architecture?Further informationWon't calling “all my reducers” for each action be slow?Further informationDo I have to deep-clone my state in a reducer? Isn't copying my state going to be slow?Further informationHow can I reduce the number of store upda
Standard patterns for setting up a Redux app with TypeScriptTechniques for correctly typing portions of Redux logic OverviewTypeScript is a typed superset of JavaScript that provides compile-time checking of source code. When used with Redux, TypeScript can help provide: Type safety for reducers, state and action creators, and UI componentsEasy refactoring of typed codeA superior developer experi
Basic Reducer Structure and State ShapeBasic Reducer StructureFirst and foremost, it's important to understand that your entire application really only has one single reducer function: the function that you've passed into createStore as the first argument. That one single reducer function ultimately needs to do several things: The first time the reducer is called, the state value will be undefine
As an application grows, common patterns in reducer logic will start to emerge. You may find several parts of your reducer logic doing the same kinds of work for different types of data, and want to reduce duplication by reusing the same common logic for each data type. Or, you may want to have multiple "instances" of a certain type of data being handled in the store. However, the global structure
At its core, Redux is really a fairly simple design pattern: all your "write" logic goes into a single function, and the only way to run that logic is to give Redux a plain object that describes something that has happened. The Redux store calls that write logic function and passes in the current state tree and the descriptive object, the write logic function returns some new state tree, and the R
Why good Redux architecture keeps state minimal and derives additional dataPrinciples of using selector functions to derive data and encapsulate lookupsHow to use the Reselect library to write memoized selectors for optimizationAdvanced techniques for using ReselectAdditional tools and libraries for creating selectorsBest practices for writing selectors Deriving DataWe specifically recommend that
Redux has a mixed heritage. It is similar to some patterns and technologies, but is also different from them in important ways. We'll explore some of the similarities and the differences below. Developer ExperienceDan Abramov (author of Redux) wrote Redux while working on his React Europe talk called “Hot Reloading with Time Travel”. His goal was to create a state management library with a minima
Redux FAQ: Code StructureTable of ContentsWhat should my file structure look like? How should I group my action creators and reducers in my project? Where should my selectors go?How should I split my logic between reducers and action creators? Where should my “business logic” go?Why should I use action creators?Where should websockets and other persistent connections live?How can I use the Redux
Redux FAQ: Organizing StateTable of ContentsRedux FAQ: Organizing StateTable of ContentsOrganizing StateDo I have to put all my state into Redux? Should I ever use React's useState or useReducer?Further informationCan I put functions, promises, or other non-serializable items in my store state?Further informationHow do I organize nested or duplicate data in my state?Further informationShould I pu
Many applications deal with data that is nested or relational in nature. For example, a blog editor could have many Posts, each Post could have many Comments, and both Posts and Comments would be written by a User. Data for this kind of application might look like: const blogPosts = [ { id: 'post1', author: { username: 'user1', name: 'User 1' }, body: '......', comments: [ { id: 'comment1', author
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 combineReducers utility included with Redux is very useful, but is deliberately limited to handle a single common use case: updating a state tree that is a plain Javascript object, by delegating the work of updating each slice of state to a specific slice reducer. It does not handle other use cases, such as a state tree made up of Immutable.js Maps, trying to pass other portions of the state t
Redux is in part inspired by Flux, and the most common complaint about Flux is how it makes you write a lot of boilerplate. In this recipe, we will consider how Redux lets us choose how verbose we'd like our code to be, depending on personal style, team preferences, longer term maintainability, and so on. ActionsActions are plain objects describing what happened in the app, and serve as the sole
Familiarity with key Redux terms and concepts like "actions", "reducers", "store", and "dispatching". (See Part 2: Redux Concepts and Data Flow for explanations of these terms.) IntroductionIn Part 2: Redux Concepts and Data Flow, we looked at how Redux can help us build maintainable apps by giving us a single central place to put global app state. We also talked about core Redux concepts like di
The articles listed in Prerequisite Concepts#Immutable Data Management give a number of good examples for how to perform basic update operations immutably, such as updating a field in an object or adding an item to the end of an array. However, reducers will often need to use those basic operations in combination to perform more complicated tasks. Here are some examples for some of the more common
This was originally intended for use with the legacy React-Redux connect method. It still works, but is rarely needed. ParametersactionCreators (Function or Object): An action creator, or an object whose values are action creators. dispatch (Function): A dispatch function available on the Store instance. Returns(Function or Object): An object mimicking the original object, but with each function
A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it, which triggers the root reducer function to calculate the new state. A store is not a class. It's just an object with a few methods on it. To create a store, pass your root reducer function to Redux Toolkit's configureStore method, which will set up a Redux store with
import { useParams } from 'react-router-dom' import { useAppSelector } from '@/app/hooks' export const SinglePostPage = () => { const { postId } = useParams() const post = useAppSelector(state => state.posts.find(post => post.id === postId) ) if (!post) { return ( <section> <h2>Post not found!</h2> </section> ) } return ( <section> <article className="post"> <h2>{post.title}</h2> <p className="pos
It may be helpful to see examples of what the different types of sub-reducer functions look like and how they fit together. Let's look at a demonstration of how a large single reducer function can be refactored into a composition of several smaller functions. Note: this example is deliberately written in a verbose style in order to illustrate the concepts and the process of refactoring, rather tha
Redux is distributed with a few examples in its source code. Most of these examples are also on CodeSandbox, an online editor that lets you play with the examples online. Counter VanillaRun the Counter Vanilla example: git clone https://github.com/reduxjs/redux.git cd redux/examples/counter-vanilla open index.html Or check out the sandbox: It does not require a build system or a view framework an
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
createStore(reducer, preloadedState?, enhancer?)Creates a Redux store that holds the complete state tree of your app. There should only be a single store in your app. The original Redux core createStore method is deprecated! createStore will continue to work indefinitely, but we discourage direct use of createStore or the original redux package. Instead, you should use the configureStore method fr
How to simplify your Redux logic using Redux ToolkitNext steps for learning and using Redux Congratulations, you've made it to the last section of this tutorial! We've got one more topic to cover before we're done. If you'd like a reminder of what we've covered so far, take a look at this summary: Recap: What You've LearnedPart 1: Overview:what Redux is, when/why to use it, and the basic pieces of
Redux Toolkit includes the RTK Query data fetching and caching API. RTK Query is a purpose built data fetching and caching solution for Redux apps, and can eliminate the need to write any thunks or reducers to manage data fetching. We specifically teach RTK Query as the default approach for data fetching, and RTK Query is built on the same patterns shown in this page. Learn how to use RTK Query fo
Recommended practices for testing apps using ReduxExamples of test configuration and setup Guiding PrinciplesThe guiding principles for testing Redux logic closely follow that of React Testing Library: The more your tests resemble the way your software is used, the more confidence they can give you. - Kent C. Dodds Because most of the Redux code you write are functions, and many of them are pure,
How a Redux store works with a UIHow to use Redux with React IntroductionIn Part 4: Store, we saw how to create a Redux store, dispatch actions, and read the current state. We also looked at how a store works inside, how enhancers and middleware let us customize the store with additional abilities, and how to add the Redux DevTools to let us see what's happening inside our app as actions are disp
What Redux is and why you might want to use itThe basic pieces that make up a Redux app IntroductionWelcome to the Redux Fundamentals tutorial! This tutorial will introduce you to the core concepts, principles, and patterns for using Redux. By the time you finish, you should understand the different pieces that make up a Redux app, how data flows when using Redux, and our standard recommended pat
次のページ
このページを最初にブックマークしてみませんか？
『Redux · A Predictable State Container for JS Apps』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
