How should you React to Redux

How should you React to Redux

• 1.
  How should you React to Redux
• 2.
  What's redux?
• 3.
  Redux State container Implements Flux
• 5.
  Unidirectional
• 6.
  Actions actions don't doanything only contain information have no idea how to update a store
• 7.
  Actions function addTodo(task) { return{ type: 'ADD_TODO', payload: task, }; }
• 8.
  Actions - test describe('TodoAction creator', ()=> { it('should create ADD_TODO action', () => { const expectedAction = { type: 'ADD_TODO', payload: 'test', }; expect(todoAction('test')).to.be.deep.equal(expectedAction); }); });
• 9.
  Dispatcher can register stores(listeners) sends actions to all stores (listeners) have no idea how to update a store
• 10.
  Store listens for actions createsnew state from old state and action knows how to update a store
• 11.
  Store - reducer function todoReducer(state =initialState, action) { switch (action.type) { case 'ADD_TODO': return { ...state, list: [ ...state.list, action.payload, ], }; default: return state; } }
• 12.
  Reducer - test describe('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); }); });
• 13.
  View represents current state canshould listen for store updates have no idea how to update a store
• 14.
  class TodoList extendsComponent { 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);
• 15.
  How to update the state? view can sendaction to dispatcher have no idea how to update a store does not have to know what happens next only what it wants to achieve
• 16.
  class TodoList extendsComponent { 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);
• 17.
  Let's code!
• 18.
  Thank you!