Redux introduces
JavaScript state containers that provide predictable state management.
Container: JavaScript object state: data
Redux core concepts and workflow
- Store: A container for storing state, JavaScript objects
- View: An HTML page
- Actions: object describing what Actions are taken on state
- Reducers: Function that manipulates the state and returns a new state
Redux counter case
<button id="plus">+</button> <span id="count">0</span> <button id="minus">-</button> <script SRC = "https://cdn.bootcss.com/redux/4.0.5/redux.min.js" > < / script > < script > / / 3. Store default state const initialState = {count: 0}; Reducer (state = initialState, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: return state; Const store = redux.createstore (reducer); // define action const increment = {type: 'increment'}; const decrement = { type: 'decrement' }; Document.getelementbyid ('plus').onclick = function () {// 6. Trigger action store. Dispatch (increment); }; document.getElementById('minus').onclick = function () { // 6. Trigger action store. Dispatch (decrement); Subscribe (() => {console.log(console.log(store.getState())); document.getElementById('count').innerHTML = store.getState().count; }) </script>Copy the code