Using Redux with React

Transcript

1. Using Redux with React Jussi Pohjolainen
2. Redux: Motivation • Avoid prop-drilling, passing props between components can 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
3. https://medium.com/better-programming/a-simple-redux- tutorial-starter-complete-code-example-9b2923572d71
4. Redux to rescue • Redux gives you one global "parent" where you store your data • Connect sibling components to the data with Redux • On source of "truth", components can ask data from the redux store
5. Redux alternative • Redux uses Context API to pass data 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
6. Install • Redux: • Gives you store, lets you keep 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
7. Redux has one Global Store import { createStore } from 'redux'; const store = createStore(); Will fail: Error: Expected the reducer to be a function.
8. Using reducer import { createStore } from 'redux'; function reducer(state, action) { console.log('reducer', state, action); return state; } const store = createStore(reducer); current state and an action. Returns new state
9. Initial state import { createStore } from 'redux'; function reducer(state = { count: 0 }, action) { console.log('reducer', state, action); return state; } const store = createStore(reducer); Setting initial state
10. Changing state • Action: object with property 'type' • {type: "INCREMENT"}
11. Example import { createStore } from 'redux'; function reducer(state = { count: 0 }, action) { console.log('reducer', state, action); return state; } const store = createStore(reducer); store.dispatch({ type: "INCREMENT" }); Dispatching action!
12. import { createStore } from 'redux'; function reducer(state = { count: 0 }, action) { console.log('reducer', state, action); switch(action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } } const store = createStore(reducer); store.dispatch({ type: "INCREMENT" }); store.dispatch({ type: "DECREMENT" }); store.dispatch({ type: "INCREMENT" }); Act on actions state is read only, do NOT modify return new state
13. import { createStore } from 'redux'; function reducer(state = { count: 0 }, action) { console.log('reducer', state, action); switch(action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } } const store = createStore(reducer); store.dispatch({ type: "INCREMENT" }); store.dispatch({ type: "DECREMENT" }); store.dispatch({ type: "INCREMENT" }); Act on actions state is read only, do NOT modify return new state
14. Subscribing to Store let { createStore } = require("redux"); function reducer(state = { count: 0 }, action) { switch (action.type) { case "INCREMENT": return { count: state.count + 1 }; case "DECREMENT": return { count: state.count - 1 }; default: return state; } } const store = createStore(reducer); store.subscribe(() => console.log(store.getState()));
15. React + Redux const App = () => ( <Provider store={store}> <Counter/> </Provider> ) Every component will have access to store (connect first)
16. Local State: not using redux function Counter() { let [counter, setCounter] = React.useState(0) return <div> <h1>Counter</h1> <button onClick={ () => setCounter(counter + 1) }>+</button> {counter} <button onClick={ () => setCounter(counter - 1) }>-</button> </div> }
17. Removal of local state and use props function Counter(props) { console.log(props) // {} // let [counter, setCounter] = React.useState(0) return <div> <h1>Counter</h1> <button onClick={ () => null }>+</button> {props.count} <button onClick={ () => null }>-</button> </div> } Using props, it's empty
18. Connecting to redux import { connect } from 'react-redux'; function 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!
19. Dispatch import { connect } from 'react-redux'; function mapStateToProps(state) { return { count: state.count }; } function Counter(props) { console.log(props) // {count: 1} return <div> <h1>Counter</h1> <button onClick={() => props.dispatch({ type: "INCREMENT" }) }>+</button> {props.count} <button onClick={() => props.dispatch({ type: "DECREMENT" }) }>-</button> </div> } export default connect(mapStateToProps)(Counter) https://daveceddia.com/redux-tutorial/ https://www.valentinog.com/blog/redux/#react-redux-tutorial-getting-to-know-redux-reducers Props is filled also with dispatch function!
20. Communication using Redux
21. Two Siblings function App() { return ( <div> <IncrementDecrement /> <DisplayCount /> </div> ); }
22. Providing Store import store from "./Store.js"; import { Provider } from "react-redux"; ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById("root") );
23. Store import { createStore } from "redux"; function reducer(state = { count: 0 }, action) { switch (action.type) { case "INCREMENT": return { count: state.count + 1 }; case "DECREMENT": return { count: state.count - 1 }; default: return state; } } const store = createStore(reducer); export default store;
24. IncrementDecrement import { connect } from "react-redux"; function IncrementDecrement(props) { const add = () => { props.dispatch({ type: "INCREMENT" }); }; const remove = () => { props.dispatch({ type: "DECREMENT" }); }; return ( <div> <button onClick={add}>+</button> <button onClick={remove}>-</button> </div> ); } export default connect()(IncrementDecrement);
25. DisplayCount import { connect } from "react-redux"; function mapStateToProps(state) { return { id: state.count, }; } function DisplayCount(props) { return <div>count = {props.id}</div>; } export default connect(mapStateToProps)(DisplayCount);