Manage the Flux of your Web Application: Let's Redux
0 likes1,938 views
The document discusses state management in React applications using Flux and Redux architectures. It outlines key concepts such as components, virtual DOM, actions, and reducers, emphasizing the principles behind Redux, including a single source of truth and pure functions for state mutations. Additionally, it introduces Redux-Saga as a means to handle side effects more effectively in Redux-based applications.
![Reducer
function addTodo(state,text){
var toReturn = Object.assign({},state,{
todos:[...state.todos]
});
toReturn.todos.push(text);
return toReturn;
};](https://image.slidesharecdn.com/fluxreduxok-170404095921/85/Manage-the-Flux-of-your-Web-Application-Let-s-Redux-48-320.jpg)
Manage the Flux of your Web Application: Let's Redux
- 1. MANAGE THE FLUX OF YOUR WEB APPLICATION: LET’S REDUX
- 2. Redux
- 7. React
- 8. “ A JavaScript library for building user interfaces
- 10. class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}!</div>; } } ReactDOM.render(<HelloMessage name="World" />, mountNode);
- 11. So Basically...it's not a framework
- 12. Features
- 13. Components
- 14. JSX
- 15. class HelloMessage extends React.Component { render() { return React.createElement( "div", null, "Hello ", this.props.name ); } } ReactDOM.render(React.createElement(HelloMessage, { name: "World" }), mountNode);
- 16. Virtual Dom
- 17. State
- 18. class Timer extends React.Component { constructor(props) { super(props); this.state = {secondsElapsed: 0}; } tick() { this.setState((prevState) => ({ secondsElapsed: prevState.secondsElapsed + 1 })); } componentDidMount() { this.interval = setInterval(() => this.tick(), 1000); } componentWillUnmount() { clearInterval(this.interval); } render() { return ( <div>Seconds Elapsed: {this.state.secondsElapsed}</div> ); } } ReactDOM.render(<Timer />, mountNode);
- 22. Flux
- 23. “ Application Architecture For Building User Interfaces
- 24. Why Not MVC?
- 30. Action: an event fired in the system with the purpose to change its state
- 31. Dispatcher: an event bus to send actions into the system
- 32. Store: business logic objects. Just like the M in MVC
- 35. Why Flux?
- 36. One Way of Thinking
- 37. Constant complexity on big projects
- 38. Redux
- 39. “ Redux is a predictable state container for JavaScript apps
- 40. Why not Flux?
- 41. One Way of Thinking (Really?)
- 42. Principles
- 43. "Single source of truth" The state of your whole application is stored in an object tree inside a single store.
- 44. "State is read-only" The only way to mutate the state is to emit an action, an object describing what happened.
- 45. "Mutations are written as pure functions" To specify how the state tree is transformed by actions, you write pure reducers.
- 46. Elements
- 47. Actions import Dispatcher from "src/Dispatcher"; var add = function(text) { Dispatcher.dispatch({ actionType: "addTodo", text: text }); }; var add = function(text) { return { actionType: "addTodo", text: text }; }; Flux Redux
- 48. Reducer function addTodo(state,text){ var toReturn = Object.assign({},state,{ todos:[...state.todos] }); toReturn.todos.push(text); return toReturn; };
- 49. Store + Dispatcher import { createStore } from 'redux'; import Reducers from 'src/Reducers'; let store = createStore(Reducers);
- 52. Why Redux?
- 53. One Way of Thinking (Really this time)
- 55. No side-effect
- 58. Async Actions
- 59. onClick() { this.props.dispatch(actions.requestData()) this.api.list().then(response => { this.props.dispatch(actions.requestDataSuccess(response.data)) }).catch(error => { this.props.dispatch(actions.requestDataError(error)) }) }
- 60. redux-saga
- 61. “ A Saga is an independent component that reacts to domain events in a cross- aggregate, eventually consistent manner.
- 62. “ redux-saga is a library that aims to make side effects in Redux applications easier and better.
- 63. function* fetch() { try { const data = yield call(api.list); yield put(actions.requestDataSuccess(data)); } catch (e) { yield put(actions.requestDataError(e)); } } function* mySaga() { yield takeLatest("REQUEST_DATA", fetch); } export default mySaga;
- 66. Thanks!