Merge branch 'master' of https://github.com/reduxjs/redux into gitatt…

…ributes

.eslintrc.cjs

@@ -34,7 +34,7 @@ module.exports = {
     ],
     '@typescript-eslint/consistent-type-imports': [
       'error',
-      { prefer: 'type-imports', disallowTypeAnnotations: false },
-    ],
+      { prefer: 'type-imports', disallowTypeAnnotations: false }
+    ]
   }
 }

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,5 @@
 blank_issues_enabled: false
 contact_links:
-    - name: 🤔 Questions and Help
-      url: https://redux.js.org/introduction/getting-started#help-and-discussion
-      about: This is a bug tracker, not a support system. For usage questions, please use our support resources.
+  - name: 🤔 Questions and Help
+    url: https://redux.js.org/introduction/getting-started#help-and-discussion
+    about: This is a bug tracker, not a support system. For usage questions, please use our support resources.

.github/workflows/test.yaml

@@ -153,9 +153,9 @@ jobs:
           name: package
           path: .
 
-      # Note: We currently expect "FalseCJS" failures for Node16 + `moduleResolution: "node16"
+      # Note: We currently expect "FalseESM" failures for Node16 + `moduleResolution: "node16"
       - name: Run are-the-types-wrong
-        run: npx @arethetypeswrong/cli ./package.tgz --format table --ignore-rules false-cjs
+        run: npx @arethetypeswrong/cli ./package.tgz --format table --ignore-rules false-esm
 
   test-published-artifact:
     name: Test Published Artifact ${{ matrix.example }}
@@ -201,6 +201,8 @@ jobs:
 
       - name: Install deps
         working-directory: ./redux-toolkit/examples/publish-ci/${{ matrix.example }}
+        env:
+          YARN_ENABLE_IMMUTABLE_INSTALLS: false
         run: yarn install
 
       - uses: actions/download-artifact@v4

README.md

@@ -1,4 +1,4 @@
-# <a href='https://redux.js.org'><img src='https://avatars.githubusercontent.com/u/13142323?s=200&v=4' height='60' alt='Redux Logo' aria-label='redux.js.org' style="display: flex;align-items: center;"/>Redux</a> 
+# <a href='https://redux.js.org'><img src='https://avatars.githubusercontent.com/u/13142323?s=200&v=4' height='60' alt='Redux Logo' aria-label='redux.js.org' style="display: flex;align-items: center;"/>Redux</a>
 
 Redux is a predictable state container for JavaScript apps.
 

docs/api/combineReducers.md

@@ -130,7 +130,7 @@ export default combineReducers({
 #### `App.js`
 
 ```js
-import { configureStore } from '@reduxjs/toolkit' 
+import { configureStore } from '@reduxjs/toolkit'
 import reducer from './reducers/index'
 
 const store = configureStore({

docs/introduction/GettingStarted.md

@@ -238,8 +238,6 @@ Here are some suggestions on when it makes sense to use Redux:
 >
 > - **[Redux FAQ: When should I use Redux?](../faq/General.md#when-should-i-use-redux)**
 > - **[You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367)**
->
 > - **[The Tao of Redux, Part 1 - Implementation and Intent](https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-1/)**
->
 > - **[The Tao of Redux, Part 2 - Practice and Philosophy](https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/)**
 > - **[Redux FAQ](../FAQ.md)**

docs/usage/WritingTests.mdx

@@ -351,7 +351,7 @@ interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
 
 export function renderWithProviders(
   ui: React.ReactElement,
-  extendedRenderOptions: ExtendedRenderOptions = {},
+  extendedRenderOptions: ExtendedRenderOptions = {}
 ) {
   const {
     preloadedState = {},
@@ -367,7 +367,7 @@ export function renderWithProviders(
   // Return an object with the store and all of RTL's query functions
   return {
     store,
-    ...render(ui, { wrapper: Wrapper, ...renderOptions }),
+    ...render(ui, { wrapper: Wrapper, ...renderOptions })
   }
 }
 ```

docs/usage/deriving-data-selectors.md

@@ -353,6 +353,12 @@ const selectItemsByCategory = createSelector(
 )
 ```
 
+You can then use the selector like this:
+
+```js
+const electronicItems = selectItemsByCategory(state, "electronics");
+```
+
 For consistency, you may want to consider passing additional parameters to a selector as a single object, such as `selectThings(state, otherArgs)`, and then extracting values from the `otherArgs` object.
 
 #### Selector Factories

docs/usage/migrating-to-modern-redux.mdx

@@ -130,7 +130,7 @@ This example shows several possible common tasks when setting up a Redux store:
 None of these are _required_, but they do show up frequently in real-world codebases.
 
 ```js title="Custom Store Setup: src/app/store.js"
-import { configureStore, combineReducers} from '@reduxjs/toolkit'
+import { configureStore, combineReducers } from '@reduxjs/toolkit'
 import {
   persistStore,
   persistReducer,
@@ -139,7 +139,7 @@ import {
   PAUSE,
   PERSIST,
   PURGE,
-  REGISTER,
+  REGISTER
 } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 import { PersistGate } from 'redux-persist/integration/react'
@@ -163,7 +163,7 @@ const rootReducer = combineReducers({
 const persistConfig = {
   key: 'root',
   version: 1,
-  storage,
+  storage
 }
 
 const persistedReducer = persistReducer(persistConfig, rootReducer)
@@ -175,12 +175,12 @@ const store = configureStore({
     const middleware = getDefaultMiddleware({
       // Pass in a custom `extra` argument to the thunk middleware
       thunk: {
-        extraArgument: {serviceLayer}
+        extraArgument: { serviceLayer }
       },
       // Customize the built-in serializability dev check
       serializableCheck: {
-        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
-      },
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
+      }
     }).concat(customMiddleware, api.middleware)
 
     // Conditionally add another middleware in dev
@@ -191,9 +191,12 @@ const store = configureStore({
     return middleware
   },
   // Turn off devtools in prod, or pass options in dev
-  devTools: process.env.NODE_ENV === 'production' ? false : {
-    stateSanitizer: stateSanitizerForDevtools
-  }
+  devTools:
+    process.env.NODE_ENV === 'production'
+      ? false
+      : {
+          stateSanitizer: stateSanitizerForDevtools
+        }
 })
 ```
 
@@ -817,7 +820,7 @@ export const store = createStore(rootReducer)
 export type RootAction = TodoActions | CounterActions
 // ❌ Common pattern: manually defining the root state type with each field
 export interface RootState {
-  todos: TodosState;
+  todos: TodosState
   counter: CounterState
 }
 

errors.json

@@ -17,4 +17,4 @@
   "15": "Dispatching while constructing your middleware is not allowed. Other middleware would not be applied to this dispatch.",
   "16": "bindActionCreators expected an object or a function, but instead received: ''. Did you write \"import ActionCreators from\" instead of \"import * as ActionCreators from\"?",
   "17": "Action \"type\" property must be a string. Instead, the actual type was: ''. Value was: '' (stringified)"
-}
+}

examples/async/public/index.html

@@ -1,8 +1,8 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Redux Async Example</title>
   </head>
   <body>

examples/async/src/components/Picker.js

@@ -4,21 +4,18 @@ import PropTypes from 'prop-types'
 const Picker = ({ value, onChange, options }) => (
   <span>
     <h1>{value}</h1>
-    <select onChange={e => onChange(e.target.value)}
-            value={value}>
-      {options.map(option =>
+    <select onChange={e => onChange(e.target.value)} value={value}>
+      {options.map(option => (
         <option value={option} key={option}>
           {option}
-        </option>)
-      }
+        </option>
+      ))}
     </select>
   </span>
 )
 
 Picker.propTypes = {
-  options: PropTypes.arrayOf(
-    PropTypes.string.isRequired
-  ).isRequired,
+  options: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired
 }

examples/async/src/components/Posts.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Posts = ({posts}) => (
+const Posts = ({ posts }) => (
   <ul>
-    {posts.map((post, i) =>
+    {posts.map((post, i) => (
       <li key={i}>{post.title}</li>
-    )}
+    ))}
   </ul>
 )
 

examples/async/src/containers/App.js

@@ -1,7 +1,11 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { selectSubreddit, fetchPostsIfNeeded, invalidateSubreddit } from '../actions'
+import {
+  selectSubreddit,
+  fetchPostsIfNeeded,
+  invalidateSubreddit
+} from '../actions'
 import Picker from '../components/Picker'
 import Posts from '../components/Posts'
 
@@ -43,28 +47,32 @@ class App extends Component {
     const isEmpty = posts.length === 0
     return (
       <div>
-        <Picker value={selectedSubreddit}
-                onChange={this.handleChange}
-                options={[ 'reactjs', 'frontend' ]} />
+        <Picker
+          value={selectedSubreddit}
+          onChange={this.handleChange}
+          options={['reactjs', 'frontend']}
+        />
         <p>
-          {lastUpdated &&
+          {lastUpdated && (
             <span>
-              Last updated at {new Date(lastUpdated).toLocaleTimeString()}.
-              {' '}
+              Last updated at {new Date(lastUpdated).toLocaleTimeString()}.{' '}
             </span>
-          }
-          {!isFetching &&
-            <button onClick={this.handleRefreshClick}>
-              Refresh
-            </button>
-          }
+          )}
+          {!isFetching && (
+            <button onClick={this.handleRefreshClick}>Refresh</button>
+          )}
         </p>
-        {isEmpty
-          ? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)
-          : <div style={{ opacity: isFetching ? 0.5 : 1 }}>
-              <Posts posts={posts} />
-            </div>
-        }
+        {isEmpty ? (
+          isFetching ? (
+            <h2>Loading...</h2>
+          ) : (
+            <h2>Empty.</h2>
+          )
+        ) : (
+          <div style={{ opacity: isFetching ? 0.5 : 1 }}>
+            <Posts posts={posts} />
+          </div>
+        )}
       </div>
     )
   }

examples/async/src/index.js

@@ -7,15 +7,12 @@ import { createLogger } from 'redux-logger'
 import reducer from './reducers'
 import App from './containers/App'
 
-const middleware = [ thunk ]
+const middleware = [thunk]
 if (process.env.NODE_ENV !== 'production') {
   middleware.push(createLogger())
 }
 
-const store = createStore(
-  reducer,
-  applyMiddleware(...middleware)
-)
+const store = createStore(reducer, applyMiddleware(...middleware))
 
 render(
   <Provider store={store}>

examples/async/src/reducers/index.js

@@ -1,7 +1,9 @@
 import { combineReducers } from 'redux'
 import {
-  SELECT_SUBREDDIT, INVALIDATE_SUBREDDIT,
-  REQUEST_POSTS, RECEIVE_POSTS
+  SELECT_SUBREDDIT,
+  INVALIDATE_SUBREDDIT,
+  REQUEST_POSTS,
+  RECEIVE_POSTS
 } from '../actions'
 
 const selectedSubreddit = (state = 'reactjs', action) => {
@@ -13,11 +15,14 @@ const selectedSubreddit = (state = 'reactjs', action) => {
   }
 }
 
-const posts = (state = {
-  isFetching: false,
-  didInvalidate: false,
-  items: []
-}, action) => {
+const posts = (
+  state = {
+    isFetching: false,
+    didInvalidate: false,
+    items: []
+  },
+  action
+) => {
   switch (action.type) {
     case INVALIDATE_SUBREDDIT:
       return {
@@ -43,7 +48,7 @@ const posts = (state = {
   }
 }
 
-const postsBySubreddit = (state = { }, action) => {
+const postsBySubreddit = (state = {}, action) => {
   switch (action.type) {
     case INVALIDATE_SUBREDDIT:
     case RECEIVE_POSTS:

examples/counter-ts/public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

examples/counter-ts/src/App.test.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { store } from './app/store';
-import App from './App';
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { store } from './app/store'
+import App from './App'
 
 test('renders learn react link', () => {
   const { getByText } = render(
     <Provider store={store}>
       <App />
     </Provider>
-  );
+  )
 
-  expect(getByText(/learn/i)).toBeInTheDocument();
-});
+  expect(getByText(/learn/i)).toBeInTheDocument()
+})

examples/counter-ts/src/app/hooks.ts

@@ -3,4 +3,4 @@ import type { AppDispatch, RootState } from './store'
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
-export const useAppSelector = useSelector.withTypes<RootState>()
+export const useAppSelector = useSelector.withTypes<RootState>()