How should you React to Redux
Transcript of How should you React to Redux
![Page 1: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/1.jpg)
How should youReact to Redux
![Page 2: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/2.jpg)
What's redux?
![Page 3: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/3.jpg)
Redux
State containerImplements Flux
![Page 4: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/4.jpg)
![Page 5: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/5.jpg)
Unidirectional
![Page 6: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/6.jpg)
Actions
actions don't do anythingonly contain informationhave no idea how to update a store
![Page 7: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/7.jpg)
Actionsfunction addTodo(task) { return { type: 'ADD_TODO', payload: task, }; }
![Page 8: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/8.jpg)
Actions - testdescribe('TodoAction creator', () => { it('should create ADD_TODO action', () => { const expectedAction = { type: 'ADD_TODO', payload: 'test', };
expect(todoAction('test')).to.be.deep.equal(expectedAction); }); });
![Page 9: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/9.jpg)
Dispatcher
can register stores (listeners)sends actions to all stores (listeners)have no idea how to update a store
![Page 10: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/10.jpg)
Store
listens for actionscreates new state from old state and actionknows how to update a store
![Page 11: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/11.jpg)
Store - reducerfunction todoReducer(state = initialState, action) { switch (action.type) { case 'ADD_TODO': return { ...state, list: [ ...state.list, action.payload, ], }; default: return state; } }
![Page 12: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/12.jpg)
Reducer - testdescribe('todoReducer', () => { it('should return initial state', () => { expect(todoReducer(undefined, {})).to.be.deep.equal(initialState); });
it('should add element to list', () => { const name = 'testName'; const action = { type: 'ADD_TODO', payload: name, }; const expectedState = { list: [ name, ], }; expect(todoReducer(initialState, action)).to.be.deep.equal(expectedState); }); });
![Page 13: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/13.jpg)
View
represents current statecan should listen for store updateshave no idea how to update a store
![Page 14: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/14.jpg)
class TodoList extends Component { static propTypes = { list: PropTypes.array, };
render() { const { list } = this.props;
return (<div> <ul> {list.map(element => <li key={key}>{element}</li>)} </ul> </div> ); } }
export default connect( state => ({ list: state.todo.list, }) )(TodoList);
![Page 15: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/15.jpg)
How to update the state?
view can send action to dispatcherhave no idea how to update a storedoes not have to know what happens nextonly what it wants to achieve
![Page 16: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/16.jpg)
class TodoList extends Component { static propTypes = { list: PropTypes.array, addItem: PropTypes.func, };
render() { const { list } = this.props;
return (<div> <button onClick={() => this.props.addItem('New item')}/> <ul> {list.map(element => <li key="{key}">{element}</li>)} </ul> </div> ); } }
export default connect( state => ({ list: state.todo.list, }), { addItem, } )(TodoList);
![Page 17: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/17.jpg)
Let's code!
![Page 18: How should you React to Redux](https://reader033.fdocuments.us/reader033/viewer/2022050613/5899aeef1a28ab30688b871d/html5/thumbnails/18.jpg)
Thank you!