m-lamonaca/dev-notes
1
0
Fork 0
mirror of https://github.com/m-lamonaca/dev-notes.git synced 2025-04-06 10:56:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add notes on Redux-Toolkit

Browse source
This commit is contained in:
Marcello 2022-04-30 10:58:12 +02:00
parent 5663d86da1
commit 78cefcee9a
3 changed files with 664 additions and 593 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

206
JavaScript/React/React Router.md
View file

@ -1,103 +1,103 @@
# React Router # [React Router](https://reactrouter.com)
Popular routing library. Allows to specify a route through React components, declaring which component is to be loaded for a given URL. Popular routing library. Allows to specify a route through React components, declaring which component is to be loaded for a given URL.
Key Components: Key Components:
- **Router**: wrap the app entry-point, usually `BrowserRouter` - **Router**: wrap the app entry-point, usually `BrowserRouter`
- **Route**: "Load this component for this URL" - **Route**: "Load this component for this URL"
- **Link**: react-managed anchors that won't post back to the browser - **Link**: react-managed anchors that won't post back to the browser
## Routers ## Routers
Router Types: Router Types:
- *HashRouter*: `#route`, adds hashes to the URLs - *HashRouter*: `#route`, adds hashes to the URLs
- *BrowserRouter*: `/route`, uses HTML5 history API to provide clean URLs - *BrowserRouter*: `/route`, uses HTML5 history API to provide clean URLs
- *MemoryRouter*: no URL - *MemoryRouter*: no URL
```js ```js
// index.js // index.js
//other imports ... //other imports ...
import { BrowserRouter as Router } from "react-router-dom"; import { BrowserRouter as Router } from "react-router-dom";
React.render( React.render(
<Router> <Router>
<App /> <App />
</Router>, </Router>,
document.getElemendById("DomID"); document.getElementById("DomID");
) )
``` ```
```js ```js
// Component.js // Component.js
import { Route, Switch } from "react-router-dom"; import { Route, Route } from "react-router-dom";
<div> <div>
{/* match route pattern exactly, all subroutes will be matched otherwise */} {/* match route pattern exactly, all sub-routes will be matched otherwise */}
<Route path="/" exact component={Component} /> <Route path="/" exact element={<Component props={props} />} />
<Route path="/route" component={Component} /> <Route path="/route" element={<Component props={props} />} />
... ...
</div> </div>
// only one child can match, similar to switch-case // only one child can match, similar to Route-case
<Switch> <Routes>
<Route path="/" exact component={Component} /> <Route path="/" exact element={<Component props={props} />} />
<Route path="/route" component={Component} /> <Route path="/route" element={<Component props={props} />} />
<Route component={PageNotFound} /> {/* matches all non-existent URLs */} <Route component={PageNotFound} /> {/* matches all non-existent URLs */}
</Switch> </Route>
``` ```
### URL Parameters & Query String ### URL Parameters & Query String
```js ```js
// Given // Given
<Route path="/route/:placeholder" component={Component} /> <Route path="/route/:placeholder" element={<Component props={props} />} />
// URL: app.com/route/subroute?param=value // URL: app.com/route/sub-route?param=value
function Component(props) { function Component(props) {
props.match.params.placeholder; // subroute props.match.params.placeholder; // sub-route
props.location.query; // { param: value } props.location.query; // { param: value }
props.location.pathname; // /route/subroute?param=value props.location.pathname; // /route/sub-route?param=value
} }
``` ```
### Redirecting ### Redirecting
```js ```js
import { Redirect } from "react-router-dom"; import { Redirect } from "react-router-dom";
// redirects to another URL, should'nt be rendered on component mount but after an action // redirects to another URL, should'nt be rendered on component mount but after an action
<Redirect to="/route" /> <Redirect to="/route" />
<Redirect from="/old-route" to="/new-route" /> <Redirect from="/old-route" to="/new-route" />
{ condition && <Redirect to="/route" /> } // redirect if condition is true { condition && <Redirect to="/route" /> } // redirect if condition is true
// or redirect manipulating the history (always in props) // or redirect manipulating the history (always in props)
props.history.push("/new-route"); props.history.push("/new-route");
``` ```
### Prompts ### Prompts
```js ```js
import { Prompt } from "react-router-dom"; import { Prompt } from "react-router-dom";
// displays a prompt when the condition is true // displays a prompt when the condition is true
<Prompt when={condition} message="prompt message" /> <Prompt when={condition} message="prompt message" />
``` ```
## Link ## Link
Clicks on a link created with React-Router will be captured by react an all the routing will happen client side. Clicks on a link created with React-Router will be captured by react an all the routing will happen client side.
```js ```js
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
// TARGET: <Route path="/route/:itemId" /> // TARGET: <Route path="/route/:itemId" />
<Link to="/route/1">Text</Link> <Link to="/route/1">Text</Link>
// add styling attributes to the rendered element when it matches the current URL. // add styling attributes to the rendered element when it matches the current URL.
<NavLink to="/route" exact activeClassName="class">Text</NavLink> <NavLink to="/route" exact activeClassName="class">Text</NavLink>
<NavLink to="/route" activeStyle={ { cssProp: value } }>Text</NavLink> <NavLink to="/route" activeStyle={ { cssProp: value } }>Text</NavLink>
``` ```

522
JavaScript/React/React.md
View file

@ -1,261 +1,261 @@
# React # React
## Components ## Components
There are two types of react components: There are two types of react components:
- Function Components - Function Components
- Class Components - Class Components
Both types can be stateful and have side effects or be purely presentational. Both types can be stateful and have side effects or be purely presentational.
```jsx ```jsx
// functional component // functional component
const Component = (props) => { const Component = (props) => {
return ( return (
<domElementOrComponent... /> <domElementOrComponent... />
); );
} }
// class component // class component
class Component extends React.Component { class Component extends React.Component {
return ( return (
<domElementOrComponent... /> <domElementOrComponent... />
); );
} }
``` ```
*NOTE*: a component name *must* start with an uppercase letter. *NOTE*: a component name *must* start with an uppercase letter.
Every components has two inputs: *props* and *state*. The props input is explicit while the state is implicit. State is used to determine the chages. Within the component state can be changed while the props object represent fixed values. Every components has two inputs: *props* and *state*. The props input is explicit while the state is implicit.
State is used to determine the changes and when to re-render.
JSX syntax can reusable HTML bat gets converted to pure JavaScript before being sent to the browser: Within the component state can be changed while the props object represent fixed input values.
```js JSX syntax can represent HTML but gets converted to pure JavaScript before being sent to the browser:
// JSX
const element = ( ```js
<h1 className="greeting">Hello, world!</h1> // JSX
); const element = (
<h1 className="greeting">Hello, world!</h1>
// compiled JS shipped to browser );
const element = React.createElement(
'h1', // HTML tag name // compiled JS shipped to browser
{className: 'greeting'}, // attrs as JSON const element = React.createElement(
'Hello, world!' // tag content (can be nested component) 'h1', // HTML tag name
); {className: 'greeting'}, // attrs as JSON
``` 'Hello, world!' // tag content (can be nested component)
);
### App Entry-point ```
```js ### App Entry-point
ReactDOM.render(
<RootComponent />, ```js
// same as const container = document.getElementById('root')!;
React.createElement(RootComponent, null); const root = createRoot(container);
document.getElementById("RootNode_parentId") // add to DOM const element = <h1s>Hello World</h1>
); root.render(element)
``` ```
### Dynamic Expressions ### Dynamic Expressions
```js ```js
<tag>{expression}</tag> // expression is evaluated an it's result is displayed <tag>{expression}</tag> // expression is evaluated an it's result is displayed
<tag onEvent={funcReference}>{expression}</tag> <tag onEvent={funcReference}>{expression}</tag>
<tag onEvent={() => func(args)}>{expression}</tag> <tag onEvent={() => func(args)}>{expression}</tag>
``` ```
### Props ### Props
```js ```js
<Component propName={value} /> // pass a value the component <Component propName={value} /> // pass a value the component
<Component propName={funcReference} /> // pass a function to the component <Component propName={funcReference} /> // pass a function to the component
function Component(props) { function Component(props) {
// use props with {props.propName} // use props with {props.propName}
} }
class Component extends React.Component{ class Component extends React.Component{
// use props with {this.props.propName} // use props with {this.props.propName}
render() render()
} }
``` ```
### Simple Function Component ### Simple Function Component
```js ```js
// Button.js // Button.js
import { useState } from "react"; import { useState } from "react";
function Button() { function Button() {
const [count, setCount] = useState(0); // hook const [count, setCount] = useState(0); // hook
const handleCLick = () => setCount(count + 1); // logic const handleCLick = () => setCount(count + 1); // logic
// JSX // JSX
return ( return (
<button onClick={handleCLick}> <button onClick={handleCLick}>
{count} {count}
</button> </button>
); );
} }
export default Button; export default Button;
``` ```
### Simple Class Component ### Simple Class Component
```js ```js
class Button extends React.Component { class Button extends React.Component {
state = {count: 0}; state = {count: 0};
//or //or
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {count: 0}; this.state = {count: 0};
} }
componentDidMount() {} // called on successful component mount componentDidMount() {} // called on successful component mount
handleClick = () => { handleClick = () => {
this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 });
} }
// or // or
handleClick = () => { handleClick = () => {
this.setState((state, props) => ({ count: state.count + props.increment }) ); this.setState((state, props) => ({ count: state.count + props.increment }) );
} }
render(){ render(){
return ( return (
<button onClick={this.handleClick}> <button onClick={this.handleClick}>
{this.state.count} {this.state.count}
</button> </button>
); );
} }
} }
``` ```
### Nesting Components ### Nesting Components
```js ```js
import { useState } from "react"; import { useState } from "react";
function Button(props) { function Button(props) {
return ( return (
<button onClick={props.onClickFunc}> <button onClick={props.onClickFunc}>
+1 +1
</button> </button>
); );
} }
function Display (props) { function Display (props) {
return ( return (
<div>{props.message}</div> <div>{props.message}</div>
); );
} }
function App() { function App() {
// state must be declare in the outer component it can be passed to each children // state must be declare in the outer component it can be passed to each children
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
const incrementCounter = () => setCount(count + 1); const incrementCounter = () => setCount(count + 1);
return ( return (
<div className="App"> <div className="App">
<Button onClickFunc={incrementCounter}/> <Button onClickFunc={incrementCounter}/>
<Display message={count}/> <Display message={count}/>
</div> </div>
); );
} }
export default App; export default App;
``` ```
### User Input (Forms) ### User Input (Forms)
```js ```js
function Form() { function Form() {
const [userName, setUserName] = useState(""); const [userName, setUserName] = useState("");
handleSubmit = (event) => { handleSubmit = (event) => {
event.preventDefault(); event.preventDefault();
// ... // ...
} }
return( return(
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<input <input
type="text" type="text"
value={userName} // controlled component value={userName} // controlled component
onChange={(event) => setUserName(event.target.value)} // needed to update UI on dom change onChange={(event) => setUserName(event.target.value)} // needed to update UI on dom change
required required
/> />
<button></button> <button></button>
</form> </form>
); );
} }
``` ```
### Lists of Components ### Lists of Components
```js ```js
// ... // ...
<div> <div>
{array.map(item => <Component key={uniqueID}>)} {array.map(item => <Component key={uniqueID}>)}
</div> </div>
// ... // ...
``` ```
**NOTE**: The `key` attribute of the component is needed to identify a particular item. It's most useful if the list has to be sorted. **NOTE**: The `key` attribute of the component is needed to identify a particular item. It's most useful if the list has to be sorted.
## Hooks ## Hooks
### `useState` ### `useState`
Hook used to create a state object. Hook used to create a state object.
`useState()` results: `useState()` results:
- state object (getter) - state object (getter)
- updater function (setter) - updater function (setter)
```js ```js
const [state, setState] = useState(default); const [state, setState] = useState(default);
``` ```
### `useEffect` ### `useEffect`
Hook used to trigger an action on each render of the component or when one of the watched items changes. Hook used to trigger an action on each render of the component or when one of the watched items changes.
```js ```js
useEffect(() => { useEffect(() => {
// "side effects" operations // "side effects" operations
return () => {/* clean up side effect */} // optional return () => {/* clean up side effect */} // optional
}, [/* list of watched items, empty triggers once */]); }, [/* list of watched items, empty triggers once */]);
``` ```
### Custom Hooks ### Custom Hooks
```js ```js
// hook definitions // hook definitions
const useCustomHook = () => { const useCustomHook = () => {
// eventual state definitions // eventual state definitions
// eventual function definitions // eventual function definitions
// ... // ...
return { obj1, obj2, ... }; return { obj1, obj2, ... };
} }
const Component(){ const Component(){
// retrieve elements from the hook // retrieve elements from the hook
const { const {
obj1, obj1,
obj2, obj2,
... ...
} = useCustomHook(); } = useCustomHook();
} }
``` ```

529
JavaScript/React/Redux.md
View file

@ -1,229 +1,300 @@
# [Redux](https://redux.js.org/) # [Redux](https://redux.js.org/)
Redux is a pattern and library for managing and updating application state, using events called *actions*. It serves as a centralized store for state that needs to be used across the entire application, with rules ensuring that the state can only be updated in a predictable fashion. Redux is a pattern and library for managing and updating application state, using events called *actions*. It serves as a centralized store for state that needs to be used across the entire application, with rules ensuring that the state can only be updated in a predictable fashion.
## Actions, Store, Immutability & Reducers ## Actions, Store, Immutability & Reducers
### Actions & Action Creators ### Actions & Action Creators
An **Action** is a plain JavaScript object that has a `type` field. An action object can have other fields with additional information about what happened. An **Action** is a plain JavaScript object that has a `type` field. An action object can have other fields with additional information about what happened.
By convention, that information is stored in a field called `payload`. By convention, that information is stored in a field called `payload`.
**Action Creators** are functions that creates and return an action object. **Action Creators** are functions that create and return action objects.
```js ```js
function actionCreator(data) function actionCreator(data)
{ {
return { type: ACTION_TYPE, payload: data }; // action obj return { type: ACTION_TYPE, payload: data }; // action obj
} }
``` ```
### Store ### Store
The current Redux application state lives in an object called the **store**. The current Redux application state lives in an object called the **store**.
The store is created by passing in a reducer, and has a method called `getState` that returns the current state value. The store is created by passing in a reducer, and has a method called `getState` that returns the current state value.
The Redux store has a method called `dispatch`. The only way to update the state is to call `store.dispatch()` and pass in an action object. The Redux store has a method called `dispatch`. The only way to update the state is to call `store.dispatch()` and pass in an action object.
The store will run its reducer function and save the new state value inside. The store will run its reducer function and save the new state value inside.
**Selectors** are functions that know how to extract specific pieces of information from a store state value. **Selectors** are functions that know how to extract specific pieces of information from a store state value.
In `initialState.js`; In `initialState.js`;
```js ```js
export default { export default {
// initial state here // initial state here
} }
``` ```
In `configStore.js`: In `configStore.js`:
```js ```js
// configStore.js // configStore.js
import { createStore, applyMiddleware, compose } from "redux"; import { createStore, applyMiddleware, compose } from "redux";
export function configStore(initialState) { export function configStore(initialState) {
const composeEnhancers = const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // support for redux devtools window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // support for redux devtools
return createStore( return createStore(
rootReducer, rootReducer,
initialState, initialState,
composeEnhancers(applyMiddleware(middleware, ...)) composeEnhancers(applyMiddleware(middleware, ...))
); );
} }
// available functions & methods // available functions & methods
replaceReducer(newReducer); // replace an existing reducer, useful for Hot Reload replaceReducer(newReducer); // replace an existing reducer, useful for Hot Reload
store.dispatch(action); // trigger a state change based on an action store.dispatch(action); // trigger a state change based on an action
store.subscribe(listener); store.subscribe(listener);
store.getState(); // retrieve current state store.getState(); // retrieve current state
``` ```
### Reducers ### Reducers
**Reducers** are functions that receives the current state and an action, decide how to update the state if necessary, and return the new state. **Reducers** are functions that receives the current state and an action, decide how to update the state if necessary, and return the new state.
Reducers must **always** follow some specific rules: Reducers must **always** follow some specific rules:
- They should only calculate the new state value based on the `state` and `action` arguments - They should only calculate the new state value based on the `state` and `action` arguments
- They are not allowed to modify the existing `state`. - They are not allowed to modify the existing `state`.
Instead, they must make *immutable updates*, by copying the existing `state` and making changes to the copied values. Instead, they must make *immutable updates*, by copying the existing `state` and making changes to the copied values.
- They must not do any asynchronous logic, calculate random values, or cause other "side effects" - They must not do any asynchronous logic, calculate random values, or cause other "side effects"
```js ```js
import initialState from "path/to/initialState"; import initialState from "path/to/initialState";
function reducer(state = initialState, action) { function reducer(state = initialState, action) {
switch(action.type){ switch(action.type){
case "ACTION_TYPE": case "ACTION_TYPE":
return { ...state, prop: value }; // return modified copy of state (using spread operator) return { ...state, prop: value }; // return modified copy of state (using spread operator)
break; break;
default: default:
return state; // return unchanged state (NEEDED) return state; // return unchanged state (NEEDED)
} }
} }
// combining reducers // combining reducers
import { combineReducers } from "redux"; import { combineReducers } from "redux";
const rootReducer = combineReducers({ const rootReducer = combineReducers({
entity: entityReducer entity: entityReducer.
}); ...
``` });
```
**NOTE**: multiple reducers can be triggered by the same action since each one operates on a different portion of the state.
**NOTE**: multiple reducers can be triggered by the same action since each one operates on a different portion of the state.
## [React-Redux](https://react-redux.js.org/)
## [React-Redux](https://react-redux.js.org/)
### Container vs Presentational Components
### Container vs Presentational Components
Container Components:
Container Components:
- Focus on how thing work
- Aware of Redux - Focus on how thing work
- Subscribe to Redux State - Aware of Redux
- Dispatch Redux actions - Subscribe to Redux State
- Dispatch Redux actions
Presentational Components:
Presentational Components:
- Focus on how things look
- Unaware of Redux - Focus on how things look
- Read data from props - Unaware of Redux
- Invoke callbacks on props - Read data from props
- Invoke callbacks on props
### Provider Component & Connect
### Provider Component & Connect
Used at the root component and wraps all the application.
Used at the root component and wraps all the application.
```js
// index.js ```js
import React from 'react'; // index.js
import ReactDOM from 'react-dom'; import React from 'react';
import { Provider } from 'react-redux'; import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { configStore } from 'path/to/configStore';
import initialState from "path/to/initialState"; import { configStore } from 'path/to/configStore';
import App from './App'; import initialState from "path/to/initialState";
import App from './App';
const store = configStore(initialState);
const store = configStore(initialState);
const rootElement = document.getElementById('root');
ReactDOM.render( const rootElement = document.getElementById('root');
<Provider store={store}> ReactDOM.render(
<App /> <Provider store={store}>
</Provider>, <App />
rootElement </Provider>,
); rootElement
``` );
```
```js
// Component.js ```js
import { connect } from 'react-redux'; // Component.js
import { increment, decrement, reset } from './actionCreators'; import { connect } from 'react-redux';
import { increment, decrement, reset } from './actionCreators';
// const Component = ...
// const Component = ...
// specifies which state is passed to the component (called on state change)
const mapStateToProps = (state, ownProps /* optional */) => { // specifies which state is passed to the component (called on state change)
// structure of the props passed to the component const mapStateToProps = (state, ownProps /* optional */) => {
return { propName: state.property }; // structure of the props passed to the component
}; return { propName: state.property };
};
// specifies the action passed to a component (the key is the name that the prop will have )
const mapDispatchToProps = { actionCreator: actionCreator }; // specifies the action passed to a component (the key is the name that the prop will have )
// or const mapDispatchToProps = { actionCreator: actionCreator };
function mapDispatchToProps(dispatch) { // or
return { function mapDispatchToProps(dispatch) {
// wrap action creators return {
actionCreator: (args) => dispatch(actionCreator(args)) // wrap action creators
}; actionCreator: (args) => dispatch(actionCreator(args))
} };
// or }
function mapDispatchToProps(dispatch) { // or
return { function mapDispatchToProps(dispatch) {
actionCreator: bindActionCreators(actionCreator, dispatch), return {
actions: bindActionCreators(allActionCreators, dispatch) actionCreator: bindActionCreators(actionCreator, dispatch),
}; actions: bindActionCreators(allActionCreators, dispatch)
} };
}
// both args are optional
// if mapDispatch is missing the dispatch function is added to the props // both args are optional
export default connect(mapStateToProps, mapDispatchToProps)(Component); // if mapDispatch is missing the dispatch function is added to the props
``` export default connect(mapStateToProps, mapDispatchToProps)(Component);
```
## Async Operations with [Redux-Thunk](https://github.com/reduxjs/redux-thunk)
## Async Operations with [Redux-Thunk](https://github.com/reduxjs/redux-thunk)
**Note**: Redux middleware runs *after* and action and *before* it's reducer.
**Note**: Redux middleware runs *after* and action and *before* it's reducer.
Redux-Thunk allows to return functions instead of objects from action creators.
A "thunk" is a function that wraps an expression to delay it's evaluation. Redux-Thunk allows to return functions instead of objects from action creators.
A "thunk" is a function that wraps an expression to delay it's evaluation.
In `configStore.js`:
In `configStore.js`:
```js
import { createStore, applyMiddleware, compose } from "redux"; ```js
import thunk from "redux-thunk"; import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
function configStore(initialState) {
const composeEnhancers = function configStore(initialState) {
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // support for redux devtools const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // support for redux devtools
return createStore(
rootReducer, return createStore(
initialState, rootReducer,
composeEnhancers(applyMiddleware(thunk, ...)) // add thunks middleware initialState,
); composeEnhancers(applyMiddleware(thunk, ...)) // add thunks middleware
} );
``` }
```
```js
// usually action on async func success ```js
function actionCreator(arg) { // usually action on async func success
return { type: TYPE, data: arg }; function actionCreator(arg) {
} return { type: TYPE, data: arg };
}
export function thunk() {
return function (dispatch) { // redux-thunk injects dispatch as arg export function thunk() {
return asyncFunction().then((data) => { // async function returns a promise return function (dispatch) { // redux-thunk injects dispatch as arg
dispatch(actionCreator(data)); return asyncFunction().then((data) => { // async function returns a promise
}) dispatch(actionCreator(data));
.catch((error) => { })
throw error; .catch((error) => {
}); throw error;
}; });
} };
}
// or using async/await
export async function thunk() { // or using async/await
return function (dispatch) { // redux-thunk injects dispatch as arg export async function thunk() {
try { return function (dispatch) { // redux-thunk injects dispatch as arg
let data = await asyncFunction(); try {
return dispatch(actionCreator(data)); let data = await asyncFunction();
} catch(error) { return dispatch(actionCreator(data));
throw error; } catch(error) {
} throw error;
} }
} }
``` }
```
## [Redux-Toolkit](https://redux-toolkit.js.org/)
The Redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux.
Redux Toolkit also includes a powerful data fetching and caching capability dubbed "RTK Query". It's included in the package as a separate set of entry points. It's optional, but can eliminate the need to hand-write data fetching logic yourself.
These tools should be beneficial to all Redux users. Whether you're a brand new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, Redux Toolkit can help you make your Redux code better.
Installation​
Using Create React App​
The recommended way to start new apps with React and Redux is by using the official Redux+JS template or Redux+TS template for Create React App, which takes advantage of Redux Toolkit and React Redux's integration with React components.
```sh
# Redux + Plain JS template
npx create-react-app my-app --template redux
# Redux + TypeScript template
npx create-react-app my-app --template redux-typescript
```
Redux Toolkit includes these APIs:
- [`configureStore()`][cfg_store]: wraps `createStore` to provide simplified configuration options and good defaults.
It can automatically combines slice reducers, adds whatever Redux middleware supplied, includes redux-thunk by default, and enables use of the Redux DevTools Extension.
- [`createReducer()`][new_reducer]: that lets you supply a lookup table of action types to case reducer functions, rather than writing switch statements.
In addition, it automatically uses the `immer` library to let you write simpler immutable updates with normal mutative code, like `state.todos[3].completed = true`.
- [`createAction()`][new_action]: generates an action creator function for the given action type string.
The function itself has `toString()` defined, so that it can be used in place of the type constant.
- [`createSlice()`][new_slice]: accepts an object of reducer functions, a slice name, and an initial state value, and automatically generates a slice reducer with corresponding action creators and action types.
- [`createAsyncThunk`][new_async_thunk]: accepts an action type string and a function that returns a promise, and generates a thunk that dispatches pending/fulfilled/rejected action types based on that promise
- [`createEntityAdapter`][entity_adapt]: generates a set of reusable reducers and selectors to manage normalized data in the store
- The `createSelector` utility from the Reselect library, re-exported for ease of use.
[cfg_store]: https://redux-toolkit.js.org/api/configureStore
[new_reducer]: https://redux-toolkit.js.org/api/createReducer
[new_action]: https://redux-toolkit.js.org/api/createAction
[new_slice]: https://redux-toolkit.js.org/api/createSlice
[new_async_thunk]: https://redux-toolkit.js.org/api/createAsyncThunk
[entity_adapt]: https://redux-toolkit.js.org/api/createEntityAdapter
### RTK Query​
RTK Query is provided as an optional addon within the `@reduxjs/toolkit` package.
It is purpose-built to solve the use case of data fetching and caching, supplying a compact, but powerful toolset to define an API interface layer got the app.
It is intended to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.
RTK Query is included within the installation of the core Redux Toolkit package. It is available via either of the two entry points below:
```cs
import { createApi } from '@reduxjs/toolkit/query'
/* React-specific entry point that automatically generates hooks corresponding to the defined endpoints */
import { createApi } from '@reduxjs/toolkit/query/react'
```
RTK Query includes these APIs:
- [`createApi()`][new_api]: The core of RTK Query's functionality. It allows to define a set of endpoints describe how to retrieve data from a series of endpoints,
including configuration of how to fetch and transform that data.
- [`fetchBaseQuery()`][fetch_query]: A small wrapper around fetch that aims to simplify requests. Intended as the recommended baseQuery to be used in createApi for the majority of users.
- [`<ApiProvider />`][api_provider]: Can be used as a Provider if you do not already have a Redux store.
- [`setupListeners()`][setup_listener]: A utility used to enable refetchOnMount and refetchOnReconnect behaviors.
[new_api]: https://redux-toolkit.js.org/rtk-query/api/createApi
[fetch_query]: https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery
[api_provider]: https://redux-toolkit.js.org/rtk-query/api/ApiProvider
[setup_listener]: https://redux-toolkit.js.org/rtk-query/api/setupListeners