be a pain, if several components • A -> B -> C -> D • B and C only are here passing data, they do not do anything to it, only D wants the data. • Passing data between siblings is a pain also • Pull data up into parent component and pass it down with props
around • It is possible to use Context API directly but you will miss out some of Redux nice features • If your app is really simple and you want to pass data around, Context API might be good for you • useContext, useReducer hooks
state in it, get state out and respond to state changes. Knows nothing about React! • React redux • Connect pieces of the state to react components • To install • npm install redux react-redux
mapStateToProps(state) { return { count: state.count }; } function Counter(props) { console.log(props) // {count: 1} return <div> <h1>Counter</h1> <button onClick={() => null}>+</button> {props.count} <button onClick={() => null}>-</button> </div> } export default connect(mapStateToProps)(Counter) Returning connected component! Uses a custom function to map universal state to props Function that gets the universal state and transforms it to props Props is now available!