add missing ;

This commit is contained in:
Marcello Lamonaca 2021-03-24 09:21:31 +01:00
parent 2d669cd200
commit 51d0a16f09

View file

@ -14,7 +14,7 @@ By convention, that information is stored in a field called `payload`.
```js ```js
function actionCreator(data) function actionCreator(data)
{ {
return { type: ACTION_TYPE, payload: data } // action obj return { type: ACTION_TYPE, payload: data }; // action obj
} }
``` ```
@ -53,8 +53,8 @@ export function configStore(initialState) {
); );
} }
// 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(); // retireve current state store.getState(); // retireve current state
@ -119,46 +119,46 @@ Used at the root component and wraps all the application.
```js ```js
// index.js // index.js
import React from 'react' import React from 'react';
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom';
import { Provider } from 'react-redux' import { Provider } from 'react-redux';
import { configStore } from 'path/to/configStore'; import { configStore } from 'path/to/configStore';
import initialState from "path/to/initialState"; import initialState from "path/to/initialState";
import App from './App' import App from './App';
const store = configStore(initialState); const store = configStore(initialState);
const rootElement = document.getElementById('root') const rootElement = document.getElementById('root');
ReactDOM.render( ReactDOM.render(
<Provider store={store}> <Provider store={store}>
<App /> <App />
</Provider>, </Provider>,
rootElement rootElement
) );
``` ```
```js ```js
// Component.js // Component.js
import { connect } from 'react-redux' import { connect } from 'react-redux';
import { increment, decrement, reset } from './actionCreators' import { increment, decrement, reset } from './actionCreators';
// const Component = ... // const Component = ...
// specifies which state is passed to the component (called on satte change) // specifies which state is passed to the component (called on satte change)
const mapStateToProps = (state, ownProps /* optional */) => { const mapStateToProps = (state, ownProps /* optional */) => {
// structure of the props passsed to the component // structure of the props passsed to the component
return { propName: state.property } return { propName: state.property };
} };
// specifies the action passed to a component (the key is the name that the prop will have ) // specifies the action passed to a component (the key is the name that the prop will have )
const mapDispatchToProps = { actionCreator: actionCreator } const mapDispatchToProps = { actionCreator: actionCreator };
// or // or
function mapDispathToProps(dispatch) { function mapDispathToProps(dispatch) {
return { return {
// wrap action creators // wrap action creators
actionCreator: (args) => dispatch(actionCreator(args)) actionCreator: (args) => dispatch(actionCreator(args))
} };
} }
// or // or
function mapDispathToProps(dispatch) { function mapDispathToProps(dispatch) {
@ -170,7 +170,7 @@ function mapDispathToProps(dispatch) {
// both args are optional // both args are optional
// if mapDispatch is missing the dispatch function is added to the props // if mapDispatch is missing the dispatch function is added to the props
export default connect(mapStateToProps, mapDispatchToProps)(Component) 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)
@ -180,6 +180,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(Component)
Redux-Thunk allows to retrurn functions instead of objects from action creators. 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. A "thunk" is a function that wraps an expression to delay it's evaluation.
In `configStore.js`:
```js ```js
import { createStore, applyMiddleware, compose } from "redux"; import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk"; import thunk from "redux-thunk";