Redux 2 Czym jest Redux? (za dokumentacją) • Redux is a predictable state container for JavaScript apps. • It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. • On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
Redux 3 Czym jest Redux? (za dokumentacją) • Redux is a predictable state container for JavaScript apps. • It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. • On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger. Konkretna biblioteka
To kojarzy mi się tylko z React-em 5 Dlaczego? ● flux jako wzorzec został opisany przez Facebook-a ● Flux jako biblioteka został napisany przez Facebook-a ● Facebook + React
Ale … można ich używać niezależnie od frameworku 6 ● wiele implementacji fluxa ● wiele bindingów do konkretnych bibliotek, jak angularJS, angular, vue.js, jquery, react
redux - 3 zasady 9 1. Single source of truth • The state of your whole application is stored in an object tree within a single store. { todos: [ { text: 'Consider using Redux', completed: true, }, { text: 'Keep all state in a single tree', completed: false } ] }
redux - 3 zasady 10 2. State is read-only • The only way to change the state is to emit an action, an object describing what happened. store.dispatch({ type: 'ADD_TODO', text: 'Get it done!' })
redux - 3 zasady 11 3. Changes are made with pure functions • To specify how the state tree is transformed by actions, you write pure reducers. function todos(state = [], action) { switch (action.type) { case 'ADD_TODO': return [ ...state, { text: action.text, completed: false } ] default: return state } }