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 React Notes (#1)

Browse source 
* Start React notes

* useEffect & custom hooks notes

* Add React-Router Notes

* Spread operator cloning improvements

* Clarify notation for object with same key-value pair

* Add Redux notes

* Fix: translation

* Add details to event notes

* Add details to useEffect and class components

* Notes on async operations

* Fix: import <script> tag type

* Fix typos

* Add React Tests Notes

* Redux Tests Notes

* generalize paths

* Fix react testing library import

* Improve Store notes

* add missing ;

* Fix swapped examples for thunk and action tests

* Improve variable names

* Typo fixes
This commit is contained in:
Marcello Lamonaca 2021-03-29 19:34:47 +02:00 • committed by GitHub
parent 09ee010b8c
commit 17bf5fe2de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 992 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
HTML/HTML.md
View file

@ -60,8 +60,6 @@ UTF-8 is a character encoding capable of encoding all possible characters, or co
XHTML and HTML4: `<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>`
Per essere compatibile con XHTML i meta-tag devono essere sempre chiusi.
HTML5: `<meta charset="utf-8">`
### HTML Shiv (Polyfill)

4
JavaScript/Events & Animation.md
View file

@ -16,6 +16,7 @@ Event Types:
var domNode = document.getElementById("id");
var onEvent = function(event) { // parameter contains info on the triggered event
event.preventDefault(); // block execution of default action
// logic here
}
@ -39,9 +40,12 @@ Event Options:
```js
let event = new Event(type [,options]); // create the event, type can be custom
let event = new CustomEvent(type, { detail: /* custom data */ }); // create event w/ custom data
domNode.dispatchEvent(event); // launch the event
```
![Event Inheritace](https://www.w3.org/TR/2014/WD-DOM-Level-3-Events-20140925/images/event-inheritance.svg)
## Animation
The window object is the assumed global object on a page.

127
JavaScript/JavaScript.md
View file

@ -30,9 +30,9 @@
### Naming Conventions
Elements | Case
----------|-----------
variable | camelCase
| Elements | Case |
| -------- | --------- |
| variable | camelCase |
### Modern Mode
@ -225,82 +225,82 @@ Number("A") == NaN; //false ?!?
## Operators
Operator | Operation
---------------|----------------
`(...)` | grouping
a`.`b | member access
`new` a(...) | object creation
a `in` b | membership
| Operator | Operation |
| ------------ | --------------- |
| `(...)` | grouping |
| a`.`b | member access |
| `new` a(...) | object creation |
| a `in` b | membership |
### Mathemetical Operators
Operator | Operation
-----------|----------------
a `+` b | addition
a `-` b | subtraction
a `*` b | multiplication
a `**` b | a^b
a `/` b | division
a `%` b | modulus
| Operator | Operation |
| -------- | -------------- |
| a `+` b | addition |
| a `-` b | subtraction |
| a `*` b | multiplication |
| a `**` b | a^b |
| a `/` b | division |
| a `%` b | modulus |
### Unary Increment Operators
Operator | Operation
--------------|------------------
`--`variable | prefix decrement
`++`variable | prefix incremente
variable`--` | postfiz decrement
variable`++` | ostfix increment
| Operator | Operation |
| ------------ | ----------------- |
| `--`variable | prefix decrement |
| `++`variable | prefix incremente |
| variable`--` | postfiz decrement |
| variable`++` | ostfix increment |
### Logical Operators
Operator | Operation
---------|----------------
a `&&` b | logical **AND**
a `||` b | logical **OR**
`!`a | logical **NOT**
| Operator | Operation |
| -------- | --------------- |
| a `&&` b | logical **AND** |
| a `||` b | logical **OR** |
| `!`a | logical **NOT** |
### Comparison Operators
Operator | Operation
----------|--------------------
a `<` b | less than
a `<=` b | less or equal to
a `>` b | greater than
a `>=` b | greater or equal to
a `==` b | equaltity
a `!=` b | inequality
a `===` b | strict equality
a `!==` b | strict inequality
| Operator | Operation |
| --------- | ------------------- |
| a `<` b | less than |
| a `<=` b | less or equal to |
| a `>` b | greater than |
| a `>=` b | greater or equal to |
| a `==` b | equaltity |
| a `!=` b | inequality |
| a `===` b | strict equality |
| a `!==` b | strict inequality |
### Bitwise Logical Operators
Operator | Operation
-----------|-----------------------------
a `&` b | bitwise AND
a `|` b | bitwise OR
a `^` b | bitwise XOR
`~`a | bitwise NOT
a `<<` b | bitwise left shift
a `>>` b | bitwise rigth sigt
a `>>>` b | bitwise unsigned rigth shift
| Operator | Operation |
| --------- | ---------------------------- |
| a `&` b | bitwise AND |
| a `|` b | bitwise OR |
| a `^` b | bitwise XOR |
| `~`a | bitwise NOT |
| a `<<` b | bitwise left shift |
| a `>>` b | bitwise rigth sigt |
| a `>>>` b | bitwise unsigned rigth shift |
### Compound Operators
Operator | Operation
------------|-------------
a `+=` b | a = a + b
a `-=` b | a = a - b
a `*=` b | a = a * b
a `**=` b | a = a ** b
a `/=` b | a = a / b
a `%=` b | a = a % b
a `<<=` b | a = a << b
a `>>=` b | a = a >> b
a `>>>=` b | a = a >>> b
a `&=` b | a = a & b
a `^=` b | a = a ^ b
a `|=` b | a = a ! b
| Operator | Operation |
| ---------- | ----------- |
| a `+=` b | a = a + b |
| a `-=` b | a = a - b |
| a `*=` b | a = a * b |
| a `**=` b | a = a ** b |
| a `/=` b | a = a / b |
| a `%=` b | a = a % b |
| a `<<=` b | a = a << b |
| a `>>=` b | a = a >> b |
| a `>>>=` b | a = a >>> b |
| a `&=` b | a = a & b |
| a `^=` b | a = a ^ b |
| a `|=` b | a = a ! b |
## Decision Statements
@ -444,7 +444,7 @@ let merge = [ ...array1, ...attay2 ]; // merge the arrays contents in new array
// objects
let obj = { prop1: value1, prop2: value2 };
let clone = { ...obj };
let clone = { ...obj, prop: value }; // shallow copy, and update copy prop
let cloneAndAdd = { prop0: value0, ...obj, prop3: value3 };
// strings
@ -559,7 +559,7 @@ let variable = value;
// object literal
let obj = {
property: value,
variable, // instead of variable: variable to use the variable's value -> variable: value
variable, // same as variable: variable
object: {
...
@ -916,7 +916,6 @@ if(date1 > date2){
In `page.html`
```html
<!-- must specyfy module as type for importer and source -->
<script src="scripts/module.js"></script>
<script src="scripts/script.js"></script>
```

103
JavaScript/React/React Router.md Normal file
View file

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

176
JavaScript/React/React Tests.md Normal file
View file

@ -0,0 +1,176 @@
# Testing React
## [Jest](https://jestjs.io/)
### Jest Configuration
In `package.json`:
```json
{
// ...
"scripts": {
"test": "jest --watch" // watch re-runs test on save
},
"jest": {
// calls additional setups for enzyme, react tesing library, ...
"setupFiles": [
"path/to/testSetup.js"
],
"moduleNameMapper": {
// file imports to ignore
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "path/to/fileMock.js",
"\\.(css|less)$": "path/to/styleMock.js"
}
},
}
```
In `fileMock.js`:
```js
// Mocks file imports for Jest. As suggested by https://jestjs.io/docs/en/webpack
module.exports = "test-file-stub";
```
In `styleMock.js`:
```js
// Mocks CSS imports for Jest. As suggested by https://jestjs.io/docs/en/webpack
module.exports = {};
```
### Jest Tests
[Expect docs](https://jestjs.io/docs/expect)
```js
// .spec.js or .test.js
it("test description", () => {
// test body
expect(expected).toEqual(actual);
});
// group related tests
describe("test group name", () => {
it(/* ... */);
it(/* ... */);
});
```
### Snapshots
In `Component.Snapshots.js`:
```js
import React from "react";
import rederer from "react-test-renderer";
import Component from "./path/to/Component";
// import mock data if necessary
it("test descrtiption", () => {
// renders the DOM tree of the component
const tree = renderer.create(<Component funcProp={jest.fn() /* mock function */} /* component props */ />);
// save a snaphot of the component at this point in time ( in __snaphsots__ folder)
// in future test it will be checked to avoid regressions
// can be updated during jest --watch pressing "u"
expect(tree).matchSnapshot();
});
```
---
## [Enzyme](https://enzymejs.github.io/enzyme/)
### Enzyme Configuration
```js
// testSetup.js
import { configure } from "enzyme";
import Adapter from "enzyme-adapert-react-<version>";
configure({ adapter: new Adapter() });
```
### Enzyme Tests
In `Component.test.js`:
```js
import React from "react";
import { shallow, mount } from "enzyme";
// eventual wrapper components (react-router, react-redux's provider, ...) for mount render
// shallow renders single component w/o children, no DOM generated
// mount renders component w/ it's children
import Component from "./path/to/Component";
// factory to setup shallow test easily
function testHelper(args) {
const defaultProps = { /* default value for props in each test */ };
const props = { ...defaultProps, ...args };
return shallow(<Component {...props} />);
}
// shallow rendering test
it("test description", () => {
const dom = testHelper(/* optional args */);
// or
const dom = shallow(<Component /* props */ />);
// check a property of expected component
// selector can be from raw JSX (name of a component)
expect(dom.find("selector").property).toBe(expected);
});
// mount rendering test
if("test descriotion" () => {
const dom = mount(
<WrapperComponent>
<Component /* props *//>
</WrapperComponent>
);
// selector has to be HTML selector since the component is rendered completely
// possible to test child components
expect(dom.find("selector").property).toBe(expected);
});
```
---
## [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
Encourages to write test based on what the user sees. So components are always *mounted* and fully rendered.
### React Testing Library Tests
In `Components.test.js`:
```js
import React from "react";
import { cleanup, render } from "@testing-library/react";
import Component from "./path/to/Component";
afterEach(cleanup);
// factory to setup test easily
function testHelper(args) {
const defaultProps = { /* default value for props in each test */ };
const props = { ...defaultProps, ...args };
return render(<Component {...props} />);
}
it("test description", () => {
const { getByText } = testHelper();
// react testing library func
getByText("text"); // check if test is present in the rendered component
});
```

261
JavaScript/React/React.md Normal file
View file

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

156
JavaScript/React/Redux Tests.md Normal file
View file

@ -0,0 +1,156 @@
# Redux Testing
## Tests for Connected Components
Connected components are warpped in a call to `connect`. Way of solving the problem:
- Wrap component with `<Provider>`. Added benefit: new store dedicated to tests.
- Add named export for unconncted component.
In `Component.js`:
```js
export function Component(props) { /* ... */ } // export unconnected component
export default connect(mapStateToProps, mapDispatchToProps)(Component) // default export of connected component
```
In `Component.test.js`:
```js
import React from "react";
// import enzyme or react testing library
// import mock data
import { Component } from "path/to/Component"; // import unconnected component
// factory to setup test easily
function testHelper(args) {
const defaultProps = {
/* default value for props in each test and required props */,
history = {} // normally injected by react-router, could also import the router
};
const props = { ...defaultProps, ...args };
return mount(<Component {...props} />); // or render if using react testing library
}
it("test description", () => {
const dom = testHelper();
// simulate page interation
dom.find("selctor").simulate("<event>");
// find changed component
// test expected behaviour of component
});
```
## Tests for Action Creators
```js
import * as actions from "path/to/actionCreators";
// import eventual action types constants
// import mock data
it("test description", () => {
const data = /* mock data */
const expectedAction = { type: TYPE, /* ... */ };
const actualAction = actions.actionCreator(data);
expect(actualAction).toEqual(expectedAction);
});
```
## Tests for Reducers
```js
import reducer from "path/to/reducer";
import * as actions from "path/to/actionCreators";
it("test description", () => {
const initialState = /* state before the action */;
const finalState = /* expected state after the action */
const data = /* data passed to the action creator */;
const action = actions.actionCreator(data);
const newState = reducer(initialState, action);
expect(newState).toEqual(finalState);
});
```
## Tests for the Store
```js
import { createStore } from "redux";
import rootReducer from "path/to/rootReducer";
import initialState from "path/to/initialState";
import * as actions from "path/to/actionCreators";
it("test description", () => {
const store = createStore(toorReducer, initialState);
const expectedState = /* state after the update */
const data = /* action creator input */;
const action = actions.actionCreator(data);
store.dispatch(action);
const state = store.getState();
expect(state).toEqual(expectedState);
});
```
## Tests for Thunks
Thunk testing requires the mocking of:
- store (using `redux-mock-store`)
- HTTP calls (using `fetch-mock`)
```js
import thunk from "redux-thunk";
import fetchMock from "fetch-mock";
import configureMockStore from "redux-mock-store";
// needed for testing async thunks
const middleware = [thunk]; // mock middlewares
const mockStore = configureMockStore(middleware); // mock the store
import * as actions from "path/to/actionCreators";
// import eventual action types constants
// import mock data
describe("Async Actions", () => {
afterEach(() => {
fetchMock.restore(); // init fecth mock for each test
});
it("test description", () => {
// mimic API call
fetchMock.mock(
"*", // capture any fetch call
{
body: /* body contents */,
headers: { "content-type": "application/json" }
}
);
// expected action fired from the thunk
const expectedActions = [
{ type: TYPE, /* ... */ },
{ type: TYPE, /* ... */ }
];
const store = mockStore({ data: value, ... }); // init mock store
return store.dispatch(actions.actionCreator()) // act
.then(() => {
expect(store.getActions()).toEqual(expectedActions); // assert
});
});
});
```

229
JavaScript/React/Redux.md Normal file
View file

@ -0,0 +1,229 @@
# [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.
## Actions, Store, Immutability & Reducers
### 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.
By convention, that information is stored in a field called `payload`.
**Action Creators** are functions that creates and return an action object.
```js
function actionCreator(data)
{
return { type: ACTION_TYPE, payload: data }; // action obj
}
```
### 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 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.
**Selectors** are functions that know how to extract specific pieces of information from a store state value.
In `initialState.js`;
```js
export default {
// initial state here
}
```
In `configStore.js`:
```js
// configStore.js
import { createStore, applyMiddleware, compose } from "redux";
export function configStore(initialState) {
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // support for redux devtools
return createStore(
rootReducer,
initialState,
composeEnhancers(applyMiddleware(middleware, ...))
);
}
// available functions & methods
replaceReducer(newReducer); // replace an existing reducer, useful for Hot Reload
store.dispatch(action); // trigger a state change based on an action
store.subscribe(listener);
store.getState(); // retireve current state
```
### 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 must **always** follow some specific rules:
- They should only calculate the new state value based on the `state` and `action` arguments
- 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.
- They must not do any asynchronous logic, calculate random values, or cause other "side effects"
```js
import initialState from "path/to/initialState";
function reducer(state = initialState, action) {
switch(action.type){
case "ACTION_TYPE":
return { ...state, prop: value }; // return modified copy of state (using spread operator)
break;
default:
return state; // return unchanged state (NEEDED)
}
}
// combining reducers
import { combineReducers } from "redux";
const rootReducer = combineReducers({
entity: entityReducer
});
```
**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/)
### Container vs Presentational Components
Container Components:
- Focus on how thing work
- Aware of Redux
- Subscribe to Redux State
- Dispatch Redux actions
Presentaional Components:
- Focus on how things look
- Unaware of Redux
- Read data from props
- Invoke callbacks on props
### Provider Component & Connect
Used at the root component and wraps all the application.
```js
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { configStore } from 'path/to/configStore';
import initialState from "path/to/initialState";
import App from './App';
const store = configStore(initialState);
const rootElement = document.getElementById('root');
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);
```
```js
// Component.js
import { connect } from 'react-redux';
import { increment, decrement, reset } from './actionCreators';
// const Component = ...
// specifies which state is passed to the component (called on satte change)
const mapStateToProps = (state, ownProps /* optional */) => {
// structure of the props passsed 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 };
// or
function mapDispathToProps(dispatch) {
return {
// wrap action creators
actionCreator: (args) => dispatch(actionCreator(args))
};
}
// or
function mapDispathToProps(dispatch) {
return {
actionCreator: bindActionCreators(actionCreator, dispatch),
actions: bindActionCreators(allActionCreators, dispatch)
};
}
// both args are optional
// 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)
**Note**: Redux middleware runs *after* and action and *before* it's reducer.
Redux-Thunk allows to retrurn functions instead of objects from action creators.
A "thunk" is a function that wraps an expression to delay it's evaluation.
In `configStore.js`:
```js
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
function configStore(initialState) {
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // support for redux devtools
return createStore(
rootReducer,
initialState,
composeEnhancers(applyMiddleware(thunk, ...)) // add thunks middleware
);
}
```
```js
// usally action on async func success
function actionCreator(arg) {
return { type: TYPE, data: arg };
}
export function thunk() {
return function (dispatch) { // redux-thunk injects dispatch as arg
return asyncFunction().then((data) => { // async function returns a promise
dispatch(actionCreator(data));
})
.catch((error) => {
throw error;
});
};
}
// or using async/await
export async function thunk() {
return function (dispatch) { // redux-thunk injects dispatch as arg
try {
let data = await asyncFunction();
return dispatch(actionCreator(data));
} catch(error) {
throw error;
}
}
}
```