¨ Idea Post about current Redux approach (2021) Nowadays we use hooks useSelector() to retrieve data from the store and useDispatch() to update it Previously we did different way mapStateToProps() is similar to useSelector() mapDispatchToProps() is similar to useDispatch() Example
import { combineReducers } from 'redux'
import { Provider, connect } from 'react-redux'
import { configureStore } from '@reduxjs/toolkit'
const initCounterState = 0
const counter = (state = initCounterState, action) => {
if (action.type === 'INCREMENT') return state + (action.num || 1)
if (action.type === 'DECREMENT') return state - action.num
return state
}
const initIsLoggedState = false
const isLogged = (state = initIsLoggedState, action) => {
if (action.type === 'SIGN_IN') return !state
return state
}
const rootReducer = combineReducers({
counter,
isLogged,
})
const store = configureStore({
reducer: rootReducer,
devTools: true,
})
const mapStateToProps = state => {
return {
counter: state.counter,
isLogged: state.isLogged
}
}
const mapDispatchToProps = dispatch => {
return {
increment: () => dispatch({ type: 'INCREMENT' }),
decrement: () => dispatch({ type: 'DECREMENT', num: 5 }),
loginToggle: () => dispatch({ type: 'SIGN_IN' }),
}
}
const WrappedComponent = connect(mapStateToProps, mapDispatchToProps)(Component)
<Provider store={store}>
<WrappedComponent />
</Provider>
function Component(props) {
const style = { border: '2px solid grey', padding: '10px', margin: '10px', maxWidth: '500px' }
return (
<div style={style}>
<div>Counter: <strong>{props.counter}</strong></div>
<button onClick={props.increment}>Increment +1</button> 
<button
onClick={props.decrement}
>
Decrement -5
</button>
<div>isLogged: <strong>{props.isLogged.toString()}</strong></div>
<button onClick={props.loginToggle}>Sign in/out</button>
</div>
)
}