component makes the store available in your React components. You need this so you can use connect().
+
+
+
+
+-->>Mapping state
+import { connect } from 'react-redux'
+// A functional React component
+function App ({ message, onMessageClick }) {
+ return (
+ onMessageClick('hello')}>
+ {message}
+
+ )
+}
+// Maps `state` to `props`:
+// These will be added as props to the component.
+function mapState (state) {
+ return { message: state.message }
+}
+
+// Maps `dispatch` to `props`:
+function mapDispatch (dispatch) {
+ return {
+ onMessageClick (message) {
+ dispatch({ type: 'click', message })
+ }
+ }
+}
+
+// Connect them:
+export default connect(mapState, mapDispatch)(App)
+
+
+
+-->>Shorthand
+export default connect(
+ (state) => ({
+ message: state.message
+ }),
+ (dispatch) => ({
+ onMessageClick: (message) => {
+ dispatch({ type: 'click', message })
+ }
+ })
+)(App)
+Same as above, but shorter.
+
+
+
+-->>Combining reducers
+const reducer = combineReducers({
+ counter, user, store
+})
+Combines multiple reducers into one reducer function. See: combineReducers (redux.js.org)
+
+
+
+#Middleware
+
+
+-->>Signature
+// noop middleware
+const logger = store => dispatch => action { dispatch(action) }
+const logger = store => {
+ // This function runs on createStore().
+ // It returns a decorator for dispatch().
+
+ return dispatch => {
+ // Runs on createStore(), too.
+ // It returns a new dispatch() function
+
+ return action => {
+ // Runs on every dispatch()
+ }
+ }
+}