connect(function(state) { return { count: state.count, fullName: state.person.firstName + " " + state.person.lastName }; })(Display)
function ReduxExample() { const count = useSelector(state => state.count); const dispatch = useDispatch() return ( <div> <MainComponent count={count} handleFireClick={() => dispatch(increment())} example='Redux' /> </div> ); }
connect( state => ({ number: state.count.number }), { increase, decrease } )(Home)
connect( function mapStateToProps(state) { return { name: state.name, count: state.count }; }, function mapDispatchToProps(dispatch) { return { onIncrement() { dispatch(incrementCounter()); }, onDecrement() { dispatch(decrementCounter()); }, onRename(name) { dispatch(renameCounter(name)); } }; } )(Counter)
function Counter() { const count = useSelector(state => state.count); const dispatch = useDispatch(); const increment = () => dispatch({ type: 'INCREMENT' }); const decrement = () => dispatch({ type: 'DECREMENT' }); return ( <div className="container"> <h2>Counter</h2> <div className="row"> <span style={{ fontSize: '2rem' }} aria-label="count"> {count} </span> </div> <div className="row"> <button style={{ marginRight: 10 }} onClick={decrement}> - </button> <button onClick={increment}>+</button> </div> </div> ); }
function App() { const currentCount = useSelector(state => state.count); const dispatch = useDispatch(); return ( <div> <h1> Current count: {currentCount} </h1> <button style={{height: 50, width: 150, borderWidth: 0, backgroundcolor: '#f24f41'}} onClick={() => dispatch(increment())} > INCREMENT </button> <button style={{marginLeft: 15, height: 50, width: 150, borderWidth: 0, backgroundcolor: '#f24f41'}} onClick={() => dispatch(decrement())} > DECREMENT </button> </div> ); }
connect((state) => ({count: state.count}))(Counter)